宿州市埇桥建设规划局网站,WordPress导航条之间得跳转,奉化区城乡建设局网站,株洲关键词优化公司概述 在实际开发中#xff0c;遇到需要在线预览各种文件的需求#xff0c;最近遇到在线预览excel文件的需求#xff0c;在此记录一下#xff01;本文主要功能实现#xff0c;用于插件 LuckyExcel #xff0c;Luckysheet#xff01;废话不多说#xff0c;上代码#xf…概述 在实际开发中遇到需要在线预览各种文件的需求最近遇到在线预览excel文件的需求在此记录一下本文主要功能实现用于插件 LuckyExcel Luckysheet废话不多说上代码
一安装LuckyExcel、Luckysheet。 安装LuckyExcel npm i LuckyExcelLuckysheet不存在npm包需要通过script标签去通过远程url引入 引入luckysheet 有两种方式 第一种CDN 注意https://cdn.jsdelivr.net/npm/luckysheetlatest/dist/luckysheet.umd.js这个路径意思是会拉取到最新的luckysheet代码但是如果Luckysheet刚刚发布jsdelivr网站可能还没来得及从npm上同步过去故而使用这个路径还是会拉到上一个版本我们推荐您直接指定最新版本。 想要指定Luckysheet版本请在所有的CDN依赖文件后面加上版本号如https://cdn.jsdelivr.net/npm/luckysheet2.1.12/dist/luckysheet.umd.js。 link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/luckysheetlatest/dist/plugins/css/pluginsCss.css /
link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/luckysheetlatest/dist/plugins/plugins.css /
link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/luckysheetlatest/dist/css/luckysheet.css /
link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/luckysheetlatest/dist/assets/iconfont/iconfont.css /
script srchttps://cdn.jsdelivr.net/npm/luckysheetlatest/dist/plugins/js/plugin.js/script
script srchttps://cdn.jsdelivr.net/npm/luckysheetlatest/dist/luckysheet.umd.js/script第二种本地静态文件引入npm run build后dist文件夹下的所有文件复制到项目目录然后通过相对路径引入
link relstylesheet href./plugins/css/pluginsCss.css /
link relstylesheet href./plugins/plugins.css /
link relstylesheet href./css/luckysheet.css /
link relstylesheet href./assets/iconfont/iconfont.css /
script src./plugins/js/plugin.js/script
script src./luckysheet.umd.js/script二在文件中引入
import LuckyExcel from luckyexcel;Luckysheet库因为是script引入的可以通过window.Luckysheet来使用为避免ts报错需要定义全局变量。
declare global {interface Window {luckysheet: any;};
};指定一个表格容器
div idluckysheet stylemargin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;/div创建表格
script
//配置项
var options {container: luckysheet //luckysheet为容器id
}
luckysheet.create(options)
/script3. 在线预览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 idlang: 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配置项
下载文件功能函数
// 下载文件
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);}
};最终效果如下
