我现在本地上传是可以用的,但是我这些数据都在excel中,就像图片一样的静态文件放在自己项目里,然后当我第一次进入页面就执行一次读取xlsx
文件把这些数据展示到页面表格上,再把读取过的数据保存到浏览器中,这种可以实现吗?
我试了下,一用 import
导入 xlsx
文件就会报错。
// 子组件
<div class="table-box">
<!-- <vxe-toolbar> // 这是上传按钮
<template v-slot:buttons>
<vxe-button @click="impotEvent">选择文件</vxe-button>
</template>
</vxe-toolbar>
-->
<vxe-table
border
resizable
show-overflow
keep-source
ref="xTable"
width="100%"
height="auto"
max-height="600"
class="xTable"
:loading="loading"
:data="dataSource"
>
<vxe-table-column
v-for="(item, i) in tableColumn"
:key="i"
:type="item.type"
:title="item.title"
:field="item.field"
:fixed="item.fixed"
:width="item.width"
:min-width="item.mWidth"
></vxe-table-column>
</vxe-table>
</div>
<script>
import XLSX from "xlsx";
// import fires from '../assets/xlsx/fires.xlsx' // 会报错
export default {
props: ["tableColumn"],
data() {
return {
loading: false, // table蒙层
dataSource: [],
};
},
created() {
this.impotEvent()
},
methods: {
impotEvent() {
this.$refs.xTable
// .readFile({
// types: ["xls", "xlsx"]
// })
.then(params => {
const { files } = params;
const fileReader = new FileReader();
fileReader.onload = ev => {
const data = ev.target.result;
const workbook = XLSX.read(data, { type: "binary" });
const csvData = XLSX.utils.sheet_to_csv(workbook.Sheets.Sheet1);
const tableData = [];
// 解析数据
csvData.split("
").forEach(vRow => {
if (vRow) {
const vCols = vRow.split(",");
const item = {};
vCols.forEach((val, cIndex) => {
if(cIndex < this.tableColumn.length) {
const column = this.tableColumn[cIndex];
if(column.field) {
item[column.field] = val;
}
}
});
tableData.push(item);
}
});
console.log(tableData)
this.dataSource = tableData;
};
fileReader.readAsBinaryString(files[0]);
});
}
}
};
</script>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…