广树
2024-11-21 16:04
@hikari:BGM也许是吧,歌曲部分感觉不一定
作者:广树时间:2018-06-22 11:03:08分类:JavaScript/jQuery/Vue
因为需求需要读取excel的.xlsx和.xls文件来批量生成网页数据。找了网上的资料后发现js-xlsx可以实现。
首先安装依赖:
$ npm install xlsx
HTML部分:
<input type="file" ref="upload" accept=".xls,.xlsx" class="outputlist_upload">
引入:
import XLSX from 'xlsx'
设置数据:
data() { return { outputs: [] } },
给input标签绑定监听事件:
mounted() { this.$refs.upload.addEventListener('change', e => {//绑定监听表格导入事件 this.readExcel(e); }) },
读取excel文件信息并输出内容:
methods: { readExcel(e) {//表格导入 var that = this; const files = e.target.files; console.log(files); if(files.length<=0){//如果没有文件名 return false; }else if(!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())){ this.$Message.error('上传格式不正确,请上传xls或者xlsx格式'); return false; } const fileReader = new FileReader(); fileReader.onload = (ev) => { try { const data = ev.target.result; const workbook = XLSX.read(data, { type: 'binary' }); const wsname = workbook.SheetNames[0];//取第一张表 const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);//生成json表格内容 console.log(ws); that.outputs = [];//清空接收数据 for(var i= 0;i<ws.length;i++){ var sheetData = { address: ws[i].addr, value: ws[i].value } that.outputs.push(sheetData); } this.$refs.upload.value = ''; } catch (e) { return false; } }; fileReader.readAsBinaryString(files[0]); } },
输出结果示例(outputs):
[{ addr:'abcadadadad', value:0.001 }, { addr:'abcadadadad', value:0.001 }]
注意:
excel的第一行必须是对应的键值,比如:
addr |
value |
abcadadadad |
0.001 |
abcadadadad |
0.001 |