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

概述

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

一：安装LuckyExcel、Luckysheet。

安装LuckyExcel：

Python

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。

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

二：在文件中引入

Python

import LuckyExcel from 'luckyexcel';

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

Python

declare global {interface Window {luckysheet: any;
    };
};

指定一个表格容器

创建表格

Python

container: 'luckysheet' //luckysheet为容器id
}
luckysheet.create(options)" _ue_custom_node_="true">

3. 在线预览excel文件

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

在线的excel url链接

通过后端流式接口请求的excel数据

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

Python

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配置项

下载文件功能函数：

Python

// 下载文件
const handleDownloadFile = () => {if (downloadFile) {const url = window.URL.createObjectURL(downloadFile);
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        a.download = '高效机房设计计算报告.xlsx';
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);
    }
};