前端实现在页面上预览excel

需求说明：后端提供了二进制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();
            }
          });

至此全部完成！