HarmonyOS鸿蒙Next开发，如何导入excel中的表格内容展示到app中，有第三方库吗？

HarmonyOS鸿蒙Next开发，如何导入excel中的表格内容展示到app中，有第三方库吗？

10 回复

可以试试第三方库 [@archermind/exceljs](https://ohpm.openharmony.cn/#/cn/detail/@archermind%2Fexceljs)

ohpm install [@archermind](/user/archermind)/exceljs

// read from a file
const workbook = new Excel.Workbook();
await workbook.xlsx.readFile(filename);
// ... use workbook

更多关于HarmonyOS鸿蒙Next开发，如何导入excel中的表格内容展示到app中，有第三方库吗？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


第一种通过JavaScript生态中的SheetJS库实现Excel文件解析，这种用于灵活处理数据的场景：

安装：

ohpm install sheetjs

解析Excel文件，将解析后的jsonData传递给表格组件渲染：

import { read, utils } from 'sheetjs';

// 读取文件为ArrayBuffer

const fileBuffer = ...; // 通过文件系统获取Excel文件二进制数据

const workbook = read(fileBuffer, { type: 'array' });

const firstSheetName = workbook.SheetNames;

const worksheet = workbook.Sheets[firstSheetName];

const jsonData = utils.sheet_to_json(worksheet); // 转换为JSON数据

第二中也可使用鸿蒙社区提供的三方库：

WuyoTable组件：为鸿蒙设计的高效表格渲染组件

ohpm install @wuyo/wuyotable

import { WuyoTable } from "@wuyo/wuyotable";

// 将解析后的数据传入组件

WuyoTable({ data: jsonData, columns: [...] })

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17

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

【解决方案】 可以使用SheetJS，在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的卡片式设计，信息一目了然，操作也更便捷。

可以尝试 @archermind/exceljs

ohpm install [@archermind](/user/archermind)/exceljs

在HarmonyOS NEXT开发中导入表格至应用内 利用 SheetJS（xlsx.js）这个纯 JavaScript 库，在 ArkTS 工程中直接解析 Excel

之前尝试过方案 web组件+JS库+本地HTML内容替换可以实现你所说的效果

在HarmonyOS Next开发中，可以使用ohos-axios或ohos-okhttp进行网络请求获取Excel文件，通过ohos-fileio读取文件内容。推荐使用SheetJS的社区适配版本解析Excel数据，该库支持xls/xlsx格式。解析后可将数据绑定至List或Table组件进行展示。注意需确认第三方库对HarmonyOS Next的兼容性。

在HarmonyOS Next开发中，可以通过以下方式实现Excel表格内容的导入与展示：

  1. 使用开源库：推荐使用Apache POI的Java版本（如poi-ooxml）处理Excel文件，但需注意鸿蒙对Java库的兼容性。可尝试通过HarmonyOS的Java API或NDK集成相关功能。

  2. 数据解析与转换：读取Excel文件后，解析数据并转换为JSON或自定义对象，再通过ListContainer或TableLayout等UI组件动态渲染表格内容。

  3. 文件操作：通过HarmonyOS的文件管理API（如@ohos.fileio）获取用户选择的Excel文件，支持本地存储或用户授权访问。

  4. 替代方案：若第三方库兼容性问题较多，可考虑将Excel转换为CSV格式，使用纯文本解析方式简化处理。

注意：目前HarmonyOS生态的第三方库较少，建议优先使用系统原生能力或适配开源解决方案。

回到顶部