【Vue 笔记】Vue 读取excel数据并生成数组
作者:广树 | 时间:2018-6-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 |
«3DS模拟器简体中文字库 | Citra3ds字库 | 符文工房4乱码解决字库 | shared_font.bin
【JavaScript 笔记】二进制数组转十六进制字符串 && 十六进制字符串转二进制数组 && 字节流二维码»
赞一个7

2018-06-23 00:05