HarmonyOS鸿蒙Next中原生端调用JS代码或者原生端传一个文件给Web端，Web使用JS代码处理文件的相关问题。

HarmonyOS鸿蒙Next中原生端调用JS代码或者原生端传一个文件给Web端，Web使用JS代码处理文件的相关问题。

有个需求，需要读取Excel的表格数据。

我试了以下方法：

  1. 使用了鸿蒙原生 三方库exceljs ，但是他在导入的时候不能直接导入，感觉是他的Index没有配置好，我看了GitHUb地址也被删掉或私有了。

  2. 使用Web，直接读取Excel文件，然后通过JSBridge将数据返回给原生。这个已经实现了，但是体验下来我觉得用户体验有点差。

  3. 找了一下看有没有能够原生读取文件，然后侧载的方式将文件传给JS代码，JS去处理之后再返回，没找到。

请教下大佬们有没有好一点的解决方案，希望能够指导一下第三点的解决方案，或者有已经封装完成可用的三方库推荐一下？


更多关于HarmonyOS鸿蒙Next中原生端调用JS代码或者原生端传一个文件给Web端，Web使用JS代码处理文件的相关问题。的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

【背景知识】

xlsx插件可以把html中的table元素或者json数据转换成表格后进行导出，也可以解析表格文件，将其转换成json格式的数据，更多可参考官方文档。

【解决方案】

xlsx是H5的插件，只能在H5页面使用，具体实现步骤如下：

  1. getRawFileContent获取rawfile文件下的excel文件，将其转换为字节数组：
async readExcel(fileName:string) {
  try {
    const resource: Uint8Array = await getContext().resourceManager.getRawFileContent(fileName)
    const uint8Array = new Uint8Array(resource.buffer)
    return Array.from(uint8Array) // 转换为普通数组供JS使用
  } catch (e) {
    console.error(`读取文件失败：${e}`)
    return []
  }
}
  1. registerJavaScriptProxy注入对象：
this.controller.registerJavaScriptProxy(this.testObjtest, 'ExcelBridge', ['readExcel'])
  1. 在H5页面调用HarmonyOS方法，接收传递的字节数组，并调用xlsx库解析：
async function readXlsContent(){
   const byteArray = await ExcelBridge.readExcel('text.xlsx')
   // 转换为Uint8Array
   const u8 = new Uint8Array(byteArray)
   // 使用SheetJS解析
   const workbook = XLSX.read(u8, {type: 'array'})
   // 获取第一个工作表
   const sheet = workbook.Sheets[workbook.SheetNames[0]]
   // 使用xlsx的utils.sheet_to_json等方法将工作表转换为JSON
   const outdata = XLSX.utils.sheet_to_json(sheet)
   console.log('outdata------:',outdata) // [{name:'张三'，gender:'男'},{name:'李四'，gender:'男'}]
}
  1. 在应用侧的消息端口上注册回调函数，接收H5侧发送过来的消息，具体可参考：应用与网页互发消息的示例。

更多关于HarmonyOS鸿蒙Next中原生端调用JS代码或者原生端传一个文件给Web端，Web使用JS代码处理文件的相关问题。的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


大佬，请教一下，通過數組的方式傳遞，這個會不會有OOM的風險，業務裡面可能會存在文件較大的情況，這個Excel最大文件能支持多少？

目前应用前台场景峰值内存占用为1500MB。根据内存管控措施内存占用2GB会触发前台warning，后台kill。如果是太大的问文件，建议分次读取。

在HarmonyOS Next中，原生端通过Web组件提供的前端控制器（WebviewController）实现与JS交互。使用postMessage()方法向Web端发送数据或文件，Web端通过onMessageEvent监听接收。文件需转为ArrayBuffer或Base64格式传输。JS处理文件后可通过postMessage()回传结果。原生端调用JS使用runJavaScript()方法执行特定脚本。双向通信需确保消息格式一致。

针对HarmonyOS Next中Excel文件处理的需求，建议采用以下方案：

  1. 原生与Web交互方案优化：
  • 使用Web组件提供的postMessage()方法实现原生与Web的双向通信
  • 原生端通过FilePicker获取文件后，使用Base64编码传给Web端
  • Web端JS使用xlsx等成熟库处理Excel数据
  1. 原生端处理推荐方案：
  • 使用ohos-fileio处理文件读取
  • 考虑使用纯ArkTS实现的轻量级Excel解析库
  • 可参考社区开源的ohos-excel-parser项目
  1. 性能优化建议：
  • 大文件建议分片处理
  • 使用Worker线程避免阻塞UI
  • 对处理结果进行缓存

当前HarmonyOS生态中确实缺乏成熟的Excel处理库，建议优先考虑Web方案配合性能优化，或者基于ohos-fileio自行实现轻量解析逻辑。后续可关注官方对办公文档类能力的增强。

回到顶部