纯前端实现在线预览excel文件（插件： LuckyExcel、Luckysheet） ...

概述
在实际开发中，遇到需要在线预览各种文件的需求，最近遇到在线预览excel文件的需求，在此记载一下！本文主要功能实现，用于插件 LuckyExcel ，Luckysheet！废话不多说，上代码！
一：安装LuckyExcel、Luckysheet。
   安装LuckyExcel：

1. npm i LuckyExcel

复制代码

  Luckysheet不存在npm包，需要通过script标签去通过长途url引入：
  引入luckysheet 有两种方式：
第一种CDN：
   留意，https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js这个路径意思是会拉取到最新的luckysheet代码，但是假如Luckysheet刚刚发布，jsdelivr网站大概还没来得及从npm上同步过去，故而使用这个路径还是会拉到上一个版本，我们推荐您直接指定最新版本。
    想要指定Luckysheet版本，请在全部的CDN依赖文件背面加上版本号，如：https://cdn.jsdelivr.net/npm/luckysheet@2.1.12/dist/luckysheet.umd.js。

1. <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css' />
2. <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css' />
3. <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css' />
4. <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css' />
5. <script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script>
6. <script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script>

复制代码

第二种当地静态文件引入，npm run build后dist文件夹下的全部文件复制到项目目次，然后通过相对路径引入：

1. <link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
2. <link rel='stylesheet' href='./plugins/plugins.css' />
3. <link rel='stylesheet' href='./css/luckysheet.css' />
4. <link rel='stylesheet' href='./assets/iconfont/iconfont.css' />
5. <script src="./plugins/js/plugin.js"></script>
6. <script src="./luckysheet.umd.js"></script>

复制代码

二：在文件中引入

1. import LuckyExcel from 'luckyexcel';

复制代码

Luckysheet库由于是script引入的，可以通过window.Luckysheet来使用，为克制ts报错，需要定义全局变量。

1. declare global {
2.     interface Window {
3.         luckysheet: any;
4.     };
5. };

复制代码

指定一个表格容器

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

复制代码

创建表格

1. <script>
2. //配置项
3. var options = {
4.     container: 'luckysheet' //luckysheet为容器id
5. }
6. luckysheet.create(options)
7. </script>

复制代码

3. 在线预览excel文件
在日常的业务中，预览的excel有2种场景：

• 在线的excel url链接
  
• 通事后端流式接口哀求的excel数据
  

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

1. fetch("example.xlsx").then(res => {
2.             return res.arrayBuffer();
3.         }).then(buffer => {
4.             // 转为blob格式，以备后面下载使用
5.             const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
6.             //可以将blob对象保存起来 需要在外层定义好`downloadFile`变量
7.             downloadFile = blob;
8.             
9.             LuckyExcel.transformExcelToLucky(buffer, function (exportJson, luckysheetfile) {
10.                 exportJson.sheets[0].zoomRatio = 1;
11.                 console.log("exportJson", exportJson);
12.                 console.log("window.luckysheet", window.luckysheet);
13.                 if (window.luckysheet && window.luckysheet.create) {
14.                     window.luckysheet?.create({
15.                         container: "excel", //luckysheet is the container id
16.                         lang: 'zh',
17.                         showtoolbar: false,//是否显示工具栏
18.                         showinfobar: false,//是否显示顶部信息栏
19.                         showsheetbar: false,//是否显示底部sheet页按钮
20.                         allowCopy: false,//是否允许拷贝
21.                         allowEdit: false,//是否允许编辑
22.                         // showstatisticBar: false,//是否显示底部计数栏
23.                         sheetFormulaBar: false,//是否显示公示栏
24.                         enableAddRow: false,//是否允许添加行
25.                         enableAddBackTop: false,//是否允需回到顶部
26.                         // devicePixelRatio: 10, //设置比例
27.                         data: exportJson.sheets,
28.                         // title: exportJson.info.name,
29.                         // userInfo: exportJson.info.name.creator,
30.                         hook: {
31.                             workbookCreateAfter: () => {
32.                                 console.log("workbookCreateAfter------------");
33.                             }
34.                         }
35.                     });
36.                 }
38.             })
39.         })

复制代码

luckysheet中并没有excel文件加载完毕的回调，但是可以通过hook中的workbookCreateAfter来监听文件加载完成。
luckysheet的页面设置项，可以通过官网文档来举行自由设置。 luckysheet设置项
下载文件功能函数：

1. // 下载文件
2. const handleDownloadFile = () => {
3.     if (downloadFile) {
4.         const url = window.URL.createObjectURL(downloadFile);
5.         const a = document.createElement('a');
6.         a.style.display = 'none';
7.         a.href = url;
8.         a.download = '高效机房设计计算报告.xlsx';
9.         document.body.appendChild(a);
10.         a.click();
11.         window.URL.revokeObjectURL(url);
12.         document.body.removeChild(a);
13.     }
14. };

复制代码

最终效果如下：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。