vue 前端预览 Excel 表

一、安装依赖包官网

npm i luckyexcel

template 模板

<!-- 用于渲染表格的容器 -->
<div id="luckysheet" style='width:100vw;height:100vh'></div>

二、加载

异步加载及

import LuckyExcel from 'luckyexcel';/* 下列代码加载 cdn 文件，你也可以在 public 文件夹在 html 中引入 */
// 封装加载 src 文件方法
function asynLoad(src, isCss = false) {return new Promise(res => {let el;if (isCss) {el = document.createElement('link');el.rel = 'stylesheet';el.href = src;} else {el = document.createElement('script');el.src = src;}document.documentElement.appendChild(el);el.onload = el.onreadystatechange = function() {if (!this.readyState ||this.readyState == 'loaded' ||this.readyState == 'complete') {res(true);}this.onload = this.onreadystatechange = null;};});
}/* Vue 中加载 cdn 文件 */
export default{created() {this.loadPlugins();},methods: {loadPlugins() {const baseURL = '//cdn.jsdelivr.net/npm/luckysheet@latest/dist';this.loading = true;this.tip = '正在加载依赖插件，请耐心等待...';Promise.all([asynLoad(`${baseURL}/plugins/css/pluginsCss.css`, true),asynLoad(`${baseURL}/plugins/plugins.css`, true),asynLoad(`${baseURL}/css/luckysheet.css`, true),asynLoad(`${baseURL}/assets/iconfont/iconfont.css`, true),asynLoad(`${baseURL}/plugins/js/plugin.js`),asynLoad(`${baseURL}/luckysheet.umd.js`)]).then(() => {luckysheet = (window as any).luckysheet;this.getOriginFile(); // 获取远端文件}).catch(res => {this.loading = false;this.errStatus = 1;this.errorTitle = '插件加载失败，请刷新后重试！';})}},
}

cdn 加载 index.html 文件

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>

三、页面使用

/* Vue 中加载 cdn 文件 */
export default{methods: {// 获取远程文件getOriginFile() {this.tip = '正在下载文件...';this.loading = trueaxios({url: this.fileURL,responseType: 'blob'}).then(({ data }) => {const blob = new Blob([data]);const file = new File([blob], this.fileName);this.init(file); // 开始渲染}).catch(e => {this.errorTitle = '文件解析失败，请下载后使用 Excel 打开或点击重试！'this.errStatus = 2;}).finally(() => {this.loading = false;})}// 渲染方法，接受文件对象，如果是本地文件直接传入文件即可init(file: File) {luckysheet.destroy(); // 先销毁当前容器LuckyExcel.transformExcelToLucky(file, exportJson => {if (exportJson.sheets === null || !exportJson.sheets.length) {this.$message.error('无法读取excel文件的内容，当前不支持xls文件！');return;}luckysheet.create({container: 'luckysheet',showinfobar: false,lang: 'zh',data: exportJson.sheets,title: exportJson.info.name,userInfo: exportJson.info.name.creator});});}},
}