如何通过原生端调用JS代码处理文件?

0 评论 320 浏览 0 收藏 4 分钟

本问答帖原创发布在华为开发者联盟社区 ,欢迎开发者前往论坛提问交流。

更多与该问题相关的讨论,请点击原帖查看:

原生端调用JS代码或者原生端传一个文件给Web端,Web使用JS代码处理文件的相关问题-华为开发者问答 | 华为开发者联盟 (huawei.com)

问题描述:

如何通过原生端调用JS代码处理文件?

解决方案:

【背景知识】
xlsx插件可以把html中的table元素或者json数据转换成表格后进行导出,也可以解析表格文件,将其转换成json格式的数据,更多可参考官方文档
【解决方案】
xlsx是H5的插件,只能在H5页面使用,具体实现步骤如下:

1.getRawFileContent获取rawfile文件下的excel文件,将其转换为base64:

async readExcel(fileName:string) {

try {

const resource: Uint8Array = await getContext().resourceManager.getRawFileContent(fileName)

const uint8Array = new Uint8Array(resource.buffer)

let base64Helper = new util.Base64Helper();

let base64 = base64Helper.encodeToStringSync(uint8Array, util.Type.MIME);

return base64

} catch (e) {

console.error(`读取文件失败:${e}`)

return []

}

}

2.registerJavaScriptProxy注入对象:

this.controller.registerJavaScriptProxy(this.testObjtest, 'ExcelBridge', ['readExcel'])

3.在H5页面调用HarmonyOS方法,接收传递的base64,并调用xlsx库解析:

async function readXlsContent(){

const b64 = await ExcelBridge.readExcel('text.xlsx')

// 使用SheetJS解析

const workbook = XLSX.read(b64, {type: 'base64'})

// 获取第一个工作表

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:'男'}]

}

4.在应用侧的消息端口上注册回调函数,接收H5侧发送过来的消息,具体可参考:应用与网页互发消息的示例

 

▶更多实践干货就在华为开发者联盟

▶扫码加入鸿蒙主题交流群,共同交流鸿蒙应用创新与开发

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!