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='http://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='http://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />
<link rel='stylesheet' href='http://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
<link rel='stylesheet' href='http://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />
<script src="http://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
<script src="http://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>

三、页面使用

/* Vue 中加载 cdn 文件 */
export default{
methods: {
// 获取远程文件
getOriginFile() {
this.tip = '正在下载文件...';
this.loading = true
axios({
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
});
});
}
},
}