vue上传excel表格并用table展示预览,可选择sheet
vue上传excel文件并可以在线预览,可自主选择sheet
·
表格上传预览完成版,选择sheet后可以根据excel表格内容进行合并。
使用html页面导入nodejs的方式完成,下载文件可以直接使用,可以方便萌新可以简单学习一下。
如果有可以优化的地方,希望大家批评指正。
使用html+vue的语法完成
完整版实例:
百度网盘分享:
链接:https://pan.baidu.com/s/167SauqpiQxV0k7Ffv3ccug
提取码:8888
限制:只能操作无合并的规规矩矩的excel表格。
1、下载xlsx插件:npm install xlsx --save
导出excel:npm install file-saver --save
2、使用方法:代码中引用:
import XLSX from "xlsx";
import FileSaver from 'file-saver';
3、代码实现思路。
生成table过程中还能自由操作table的行列。
<template>
<div>
<el-upload
ref="input"
action="/"
:show-file-list="false"
:auto-upload="false"
:on-change="importExcel"
type="file"
>
<el-button
slot="trigger"
icon="el-icon-upload"
size="small"
type="primary">
上传文件
</el-button>
</el-upload>
<el-button @click="exportToExcel">导出</el-button>
<el-table style="width: auto" border :data="tableData" id="tableData">
<template v-for="(item,index) in tableHead">
<el-table-column :prop="item.column_name" :label="item.column_comment" :key="index"
v-if="item.column_name !== 'id'"></el-table-column>
</template>
</el-table>
</div>
</template>
<script>
import XLSX from "xlsx";
import FileSaver from 'file-saver'
export default {
name: "FillShippingCost",
data() {
return {
// 表头数据
tableHead: [],
// 表格数据
tableData: [],
}
},
//data结束
methods: {
//导入
importExcel(file) {
const types = file.name.split(".")[1];
const fileType = ["xlsx", "xlc", "xlm", "xls", "xlt"].some(
item => item === types
);
if (!fileType) {
alert("格式错误!请重新选择");
return;
}
this.file2Xce(file).then(tabJson => {
if (tabJson && tabJson.length > 0) {
const data = {};
const this_ = this;
// let params = Object.assign({}, this_.reviewForm);
this_.card = JSON.stringify(tabJson[0].sheet);
data.card = this_.card; //中英文转化
this_.excelToTable(data);//调用生成table方法
}
});
},
file2Xce(file) {
return new Promise(function (resolve) {
const reader = new FileReader();
reader.onload = function (e) {
const data = e.target.result;
this.wb = XLSX.read(data, {
type: "binary"
});
const result = [];
this.wb.SheetNames.forEach(sheetName => {
result.push({
sheetName: sheetName,
sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
});
});
resolve(result);
};
reader.readAsBinaryString(file.raw);
});
},
importMerchantInfo() {
},
// 把excel用转化为table
excelToTable(data) {
const outData = JSON.parse(data.card);
// console.log("excel数据: "+JSON.stringify(outData));
const tableHeadList = [];
let num = 1;
for (const tableHead2 in outData[0]) {
const tableHead1 = {};
tableHead1['column_name'] = "column_name" + num;
tableHead1['column_comment'] = tableHead2;
num = num + 1;
tableHeadList.push(tableHead1);
}
// console.log("表头数据:"+JSON.stringify(tableHeadList));
this.tableHead = tableHeadList;//定制表头
const tableDataList = [];
for (let j = 0; j < outData.length; j++) {
const tableData1 = {};
for (let k = 0; k < tableHeadList.length; k++) {
// console.log("表头字段:"+tableHeadList[k]['column_name']+",表头数据:" + tableHeadList[k]['column_comment']);
for (const outDataKey in outData[j]) {
if (outData[j].hasOwnProperty(outDataKey)) {//对于(可能迭代异常(自定义/继承)成员,可能缺少 hasOwnProperty 检查)的错误的解决,用if语句判断
if (tableHeadList[k]['column_comment'] === outDataKey) {
tableData1[tableHeadList[k]['column_name']] = outData[j][outDataKey];
}
}
}
}
tableDataList.push(tableData1);
}
this.tableData = tableDataList;//给表格内容赋值
},
//导出Excel
exportToExcel () {
let et = XLSX.utils.table_to_book(document.getElementById('tableData')); //此处传入table的DOM节点
let etOut = XLSX.write(et, {
bookType: 'xlsx',
bookSST: true,
type: 'array'
});
try {
FileSaver.saveAs(new Blob([etOut], {
type: 'application/octet-stream'
}), 'trade-publish.xlsx'); //trade-publish.xlsx 为导出的文件名
} catch (e) {
console.log(e, etOut) ;
}
return etOut;
}
}
}
</script>
<style scoped>
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)