excel文件预览: luckyexcel+luckysheet

1. 克隆Luckysheet源码到本地

git clone https://github.com/dream-num/Luckysheet.git

2. 安装依赖

npm install
npm install gulp -g  

3. 开发

npm run dev

4. 打包

npm run build

本地引入
npm run build 后 dist 文件夹下的所有文件复制到vue项目的public目录下，然后在index.html文件中通过相对路径引入：

<link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./plugins/plugins.css' />
<link rel='stylesheet' href='./css/luckysheet.css' />
<link rel='stylesheet' href='./assets/iconfont/iconfont.css' />
<script src="./plugins/js/plugin.js"></script>
<script src="./luckysheet.umd.js"></script>

表格容器

<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>

1.预览本地文件/后端返回文件流文件

      // 获取文件流const token = '用户token'axios.get('你的接口地址', {headers: { 'Token': token },responseType: 'blob',params: {// 参数}}).then((response) => {// 将获取到的文件对象传递给 uploadExcel 方法const file = new File([response.data], 'XXX.xlsx', { type: response.data.type });}).catch((error) => {console.error('文件获取失败：', error);})

import LuckyExcel from 'luckyexcel'LuckyExcel.transformExcelToLucky(file, (exportJson, luckysheetfile) => {if(exportJson.sheets==null || exportJson.sheets.length==0){console.log("文件读取失败!");return;}// 销毁原来的表格luckysheet.destroy();// 重新创建新表格exportJson.sheets[0].defaultRowHeight = 25  // 行高luckysheet.create({container: 'luckysheet', // 设定DOM容器的idcolumn: 15,row: 30,showtoolbar: false, // 是否显示工具栏showinfobar: false, // 是否显示顶部信息栏showsheetbarConfig:{add: false,menu: false,},sheetRightClickConfig: {delete: false, // 删除copy: false, // 复制rename: false, //重命名color: false, //更改颜色hide: false, //隐藏，取消隐藏move: false, //向左移，向右移},//自定义单元格右键菜单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 // 设置单元格格式},showstatisticBar: false, // 是否显示底部计数栏sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置allowEdit: false, // 是否允许前台编辑enableAddRow: false, // 是否允许增加行enableAddCol: false, // 是否允许增加列sheetFormulaBar: false, // 是否显示公式栏enableAddBackTop: false, //返回头部按钮data: exportJson.sheets, //表格内容title: exportJson.info.name, //表格标题});
});

2.excel文件地址

LuckyExcel.transformExcelToLuckyByUrl(excelUrl, excelName, (exportJson, luckysheetfile) => {})