正在召唤神秘力量
导航

萌即是正义!时不时分享一些ACG活动记录与有趣代码的小站!

【Vue 笔记】Vue 读取excel数据并生成数组

作者:广树·时间: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

#Vue.js#JavaScript
侧边栏
最新评论
广树
2024-04-19
@粽叶加米:心态好,哈哈哈。我现在也随缘了,但是还是要研究研究现在搜索引擎都什么情况。
广树
2024-04-19
@r:哈哈哈,生动
r
2024-04-19
百度=互联网反诈集训中心
粽叶加米
2024-04-19
我是随缘了,没有在意,刚搜了一下也没啥收录 (ㆆᴗㆆ)
广树
2024-04-19
@MoeNya:现在绝大多数搜索引擎都会抓取前端渲染后的页面信息。但是像推特脸书这些社交平台的爬虫则不会,仍然是抓取静态页面。所以如果想要实现社交平台上动态展示标题封面图等信息的话,还是需要服务器渲染的支持。这就是我的博客没有选择纯前端渲染的原因。
正在攻略

圣兽之王.jpg

传颂之物

PSN奖杯卡

PSN奖杯卡

赞助商广告