需求说明:后端提供了二进制excel文件流,需要将excel完整渲染在浏览器端,该excel表包含有合并单元格

解决方式:使用js-xlsx插件
xlsx简介:
js-xlsx是sheetJS出品的读取和导出各种ecxel的工具库,功能十分强大
xlsx官方文档:https://www.npmjs.com/package/xlsx

使用手册:
1.首先需要先安装xlsx: npm install xlsx --save
2.请求后端接口获取文件流
使用axios

获取文件流时需要注意: responseType:“arraybuffer”
3.处理获取到的二进制文件流:

  • 实例化Uint8Array
let data = new Uint8Array(res.data);
  • 以二进制流方式读取得到整份excel表格对象
let workbook = XLSX.read(data, { type: "array" });   //表格对象
let sheetNames = workbook.SheetNames;  //获取到所有表格
let worksheet = workbook.Sheets[sheetNames[0]];  //取第一张表
  • 调用xlsx提供的方法,直接将提取到的表格数据转换为html代码,将html代码渲染到指定容器就完成了
let html = XLSX.utils.sheet_to_html(worksheet);

xlsx还提供了多个方法,仅供参考,详情见官方文档:

XLSX.utils.sheet_to_csv:生成CSV格式(会忽略调格式,单元格合并等信息,仅适用于简单表格)

XLSX.utils.sheet_to_txt:生成纯文本格式

XLSX.utils.sheet_to_json:输出JSON格式

  • 实际在html渲染完成后会出现空白行,需要手动剔除掉空白行
let tableDom = this.$el.querySelector(".table_container table");
          let trs = tableDom.querySelectorAll("tr");
          trs.forEach((tr) => {
            if (!tr.innerText.trim()) {
              tr.remove();
            }
          });

至此全部完成!

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐