前端拿到后端返回文件流后页面生成excel表格预览（Luckysheet）

　　最近项目遇到一个需求，就是本来只需要导出的excel文件，客户要求在前端页面进行预览查看。在查找资料后，决定使用Luckysheet来进行excel文件的预览。

1.安装

npm i luckyexcel

2.html中引入相关js，css文件，可以自己下下来放到本地引入

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>

3..创建.vue文件，创建表格容器

 <div id="luckysheet" ref="luckysheetRef" >

4.创建表格

<script setup>
import LuckyExcel from 'luckyexcel'
// luckysheet配置项
const options = {
  container: 'luckysheet',
  lang: 'zh',
  showtoolbar: false,//是否显示工具栏
  showinfobar: false,//是否显示顶部信息栏
  showsheetbar: false,//是否显示底部sheet页按钮
  showstatisticBar: false,//是否显示底部计数栏
  allowCopy: false,//是否允许拷贝
  showConfigWindowResize: false,//图表或数据透视表的配置会在右侧弹出，设置弹出后表格是否会自动缩进
  sheetRightClickConfig: {
    delete: false, // 删除
    copy: false, // 复制
    rename: false, //重命名
    color: false, //更改颜色
    hide: false, //隐藏，取消隐藏
    move: false, //向左移，向右移
  },
  rangeSelect: null,
  cellRightClickConfig: {
    copy: false, // 复制
    copyAs: false, // 复制为
    paste: false, // 粘贴
    insertRow: false, // 插入行
    insertColumn: false, // 插入列
    deleteRow: false, // 删除选中行
    deleteColumn: false, // 删除选中列
    deleteCell: false, // 删除单元格
    hideRow: false, // 隐藏选中行和显示选中行
    hideColumn: false, // 隐藏选中列和显示选中列
    rowHeight: false, // 行高
    columnWidth: false, // 列宽
    clear: false, // 清除内容
    matrix: false, // 矩阵操作选区
    sort: false, // 排序选区
    filter: false, // 筛选选区
    chart: false, // 图表生成
    image: false, // 插入图片
    link: false, // 插入链接
    data: false, // 数据验证
    cellFormat: false // 设置单元格格式
  },
  allowEdit: false,
  sheetFormulaBar: false,//是否显示公示栏
  enableAddRow: false,//是否允许添加行
  enableAddBackTop: false,//是否允需回到顶部
  config: {}
}
// 报表预览
const uploadExcel = (files) => {
  // const files = evt.target.files;
  if (files == null || files.length == 0) {
    alert("No files wait for import");
    return;
  }
  let name = files[0].name;
  let suffixArr = name.split("."), suffix = suffixArr[suffixArr.length - 1];
  if (suffix != "xlsx") {
    alert("只支持导入xlsx文件！");
    return;
  }
  LuckyExcel.transformExcelToLucky(files[0], function (exportJson, luckysheetfile) {

    if (exportJson.sheets == null || exportJson.sheets.length == 0) {
      alert("读取excel文件内容失败，暂不支持xls文件!");
      return;
    }
    window.luckysheet.destroy();

    window.luckysheet.create({//配置项
      ...options,
      data: exportJson.sheets,
      title: exportJson.info.name,
    });
  });
}
//通过接口获取文件流，将文件流转为file文件，再使用插件进行预览
const statementFun = (type) => {
  $http({//此处是封装的请求无需在意
    method: xxxxApu,
    data: xxx,
    success: (res) => {
      const blob = new Blob([res], {
        // 设置返回的文件类型
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      });
        //判断是否为预览功能
      if (type == 'search') {
        //将blob转为xlsxFile文件
        let file = new window.File([blob], data.statementName + ".xlsx", { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
        //调用预览方法进行预览
        uploadExcel([file]);
      } else {//下载导出方法
        // 这里就是创建一个a标签，等下用来模拟点击事件
        const a = document.createElement('a');
        // 兼容webkix浏览器，处理webkit浏览器中href自动添加blob前缀，默认在浏览器打开而不是下载
        const URL = window.URL || window.webkitURL;
        // 根据解析后的blob对象创建URL 对象
        const herf = URL.createObjectURL(blob);
        // 下载链接
        a.href = herf;
        // 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf'
        a.download = 'xxx文件名.xlsx';
        document.body.appendChild(a);
        // 点击a标签，进行下载
        a.click();
        // 收尾工作，在内存中移除URL 对象
        document.body.removeChild(a);
        window.URL.revokeObjectURL(herf);
      }
    },
    fail: (res) => {

    }
  })
}

</script>    

具体的Luckysheet配置信息可以看LuckysheetAPI文档。