1,luckeysheet资源,下载到本地,npm run build打包,把dist中除index外的文件都放到public中
在public/index中引入这些文件
<link href="./plugins/css/pluginsCss.css" rel="stylesheet" />
<link href="./plugins/plugins.css" rel="stylesheet" />
<link href="./css/luckysheet.css" rel="stylesheet" />
<link href="./assets/iconfont/iconfont.css" rel="stylesheet" />
<script src="./plugins/js/plugin.js"></script>
<script src="./luckysheet.umd.js"></script>
2,安装LuckyExcel,npm install LuckyExcel --s
<template>
<div>
<el-upload
class="upload-demo"
action=""
:auto-upload="false"
:on-change="onChange"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
只能上传jpg/png文件,且不超过500kb
</div>
</el-upload>
<div id="luckysheet" style="width: 100%; height: 80vh"></div>
</div>
</template>
<script>
import LuckyExcel from "luckyexcel";
export default {
data() {
return {
file: "",
};
},
computed: {},
created() {},
mounted() {
//配置项
},
methods: {
onChange(file) {
console.log(file);
this.file = file;
LuckyExcel.transformExcelToLucky(
file.raw,
function (exportJson, luckysheetfile) {
// 转换后获取工作表数据
console.log(exportJson);
console.log(luckysheetfile);
let options = {
container: "luckysheet", //luckysheet为容器id
title: "", // 设定表格名称
lang: "zh", // 设定表格语言
data: exportJson.sheets,
};
luckysheet.create(options);
}
);
},
},
};
</script>
有一些图形无法解析