导航

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

侧边栏
最新评论
广树管理员
2025-06-30 18:07
@菲兹克斯喵:是的,刚完结
菲兹克斯喵
2025-06-30 17:44
这个居然完结了?两年前看的,感觉挺好看的,没想到也完结了呀.
广树管理员
2025-06-29 14:30
@白水:多谢大佬夸奖
白水
2025-06-29 14:29
ヾ(≧∇≦*)ゝ博客好萌
广树管理员
2025-06-26 20:36
@Jeffer.Z:编辑器,github 下面的
攻略中
ToHeart
暂无评分
SteamToHeart
2025年6月26日 19时 ~ 攻略中
已累计游玩4天
AQUAPLUS推出的“温暖人心的校园恋爱游戏”将以高清全3D形式焕新归来!
爱上火车-Last Run!!-
暂无评分
Steam爱上火车-Last Run!!-
2025年6月24日 19时 ~ 攻略中
已累计游玩6天
游戏设定于架空日本。为了辅助驾驶员行驶,每列火车都配备了专用的铁路人偶。然而,由于新技术“空凝机”以及人工智能的面世,现有的铁路系统几乎已被废弃,铁路人偶和对应列车也被出售。主人公右田双铁所生活的“御一夜市”正在衰退,有人提出让空凝机工厂落户此地以振兴经济。空凝机工厂会带来水污染,而主人公为了阻止其落户而回到御一夜市。
符文工房龙之天地
暂无评分
Steam符文工房龙之天地
2025年6月10日 20时 ~ 攻略中
已累计游玩2周6天
体验奇幻冒险与日常生活的 RPG《符文工房》系列最新作。 玩家可以在日常生活中种田、钓鱼和复兴村庄,也可以在冒险的过程中邂逅各种各样的角色。打造属于自己的“村庄”,享受全新的冒险与生活吧!
fault - StP - LIGHTKRAVTE
暂无评分
Steamfault - StP - LIGHTKRAVTE
2025年5月29日 20时 ~ 攻略中
已累计游玩1个月2天
全球累计销量超过50万份的“fault”系列最新作!故事的舞台是一个融合了奇幻与科幻的超前世界——卢森海德王国。本作讲述了生活在此地的一个平凡又平庸的究极普通市民——名为果子的少年的故事。
PSN奖杯卡

PSN奖杯卡

归档
赞助商广告

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

作者:广树时间:2018-06-22 11:03:08分类:JavaScript

因为需求需要读取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

donate.png

1210 x 50(蓝底).png

cloudcone