import LuckyExcel from 'luckyexcel';

Luckysheet库因为是script引入的，可以通过window.Luckysheet来使用，为避免ts报错，需要定义全局变量

declare global {

interface Window {

luckysheet: any;

};

};

3. 在线预览excel文件

在日常的业务中，预览的excel有2种场景：

在线的excel url链接通过后端流式接口请求的excel数据

所以我们通过接口将response转为buffer格式，来兼容2种形式场景：

fetch("example.xlsx").then(res => {

return res.arrayBuffer();

}).then(buffer => {

// 转为blob格式，以备后面下载使用

const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

//可以将blob对象保存起来 需要在外层定义好`downloadFile`变量

downloadFile = blob;

LuckyExcel.transformExcelToLucky(buffer, function (exportJson, luckysheetfile) {

exportJson.sheets[0].zoomRatio = 1;

console.log("exportJson", exportJson);

console.log("window.luckysheet", window.luckysheet);

if (window.luckysheet && window.luckysheet.create) {

window.luckysheet?.create({

container: "excel", //luckysheet is the container id

lang: 'zh',

showtoolbar: false,//是否显示工具栏

showinfobar: false,//是否显示顶部信息栏

showsheetbar: false,//是否显示底部sheet页按钮

allowCopy: false,//是否允许拷贝

allowEdit: false,//是否允许编辑

// showstatisticBar: false,//是否显示底部计数栏

sheetFormulaBar: false,//是否显示公示栏

enableAddRow: false,//是否允许添加行

enableAddBackTop: false,//是否允需回到顶部

// devicePixelRatio: 10, //设置比例

data: exportJson.sheets,

// title: exportJson.info.name,

// userInfo: exportJson.info.name.creator,

hook: {

workbookCreateAfter: () => {

console.log("workbookCreateAfter------------");

}

}

});

}

})

})

luckysheet中并没有excel文件加载完毕的回调，但是可以通过hook中的workbookCreateAfter来监听文件加载完成。

luckysheet的页面配置项，可以通过官网文档来进行自由配置

luckysheet配置项

预览效果如下图所示：

下载excel文件 函数如下：