导航

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

侧边栏
最新评论
广树管理员
2025-12-18 22:34
@Chise Hachiroku:啊这……换个环境吧
Chise Hachiroku
2025-12-18 22:31
@广树:可惜不喝酒,周围也没有山。
广树管理员
2025-12-18 22:23
@Chise Hachiroku:建议去山上找一只龙
Chise Hachiroku
2025-12-18 22:12
加了四个礼拜班了。现在小林味(班味)很浓。
广树管理员
2025-12-18 20:48
@Ringnee:谢谢大佬夸奖!我算是赶了个红叶的尾巴,嘻嘻。
攻略中
全民高尔夫环球之旅
68分还行
Steam全民高尔夫环球之旅
2025年9月07日 12时 ~ 攻略中
已累计游玩3个月13天
想起来第一次接触这个系列是在PSP,之后在PSV、PS4上都买过。后来因为制作组被解散,以为再也玩不到了,没想到这反而促使这款游戏从索尼PS专属变成了全平台。当时看到上PC别说有多高兴了。 但是期待越大失望也越大。随着游戏的不断深入,遇到的BUG和不合理的设定也越来越多。这款游戏的测试似乎只做了前期流程的测试,后面大部...
SILENT HILL f
暂无评分
PS5SILENT HILL f
2025年12月13日 15时 ~ 攻略中
已累计游玩6天
主人公是居住在群山环绕的日本乡村小镇·戎之丘的高中生·深水雏子。 她的日常生活因为神秘白色“怪物”的出现突然崩塌。 她一边在面目全非的熟悉小镇中探索、战斗、解谜,一边迎来属于她的“结局”。
Summer Pockets REFLECTION BLUE
暂无评分
SteamSummer Pockets REFLECTION BLUE
2025年12月18日 21时 ~ 攻略中
已累计游玩1天
「唯有那片炫目,始终未曾忘却。」 由创作出「CLANNAD」等名作的游戏品牌Key带来的一款文字冒险游戏。 「暑假」「与伙伴的盛夏回忆」「乡愁」 在远离尘嚣的小岛上,与伙伴共度夏日的时光,谈场盛夏的恋爱。 这是夏日的故事。 无法忘怀,也不能忘怀的夏日回忆。
ToHeart
暂无评分
SteamToHeart
2025年6月26日 19时 ~ 攻略中
已累计游玩5个月26天
AQUAPLUS推出的“温暖人心的校园恋爱游戏”将以高清全3D形式焕新归来!
fault - StP - LIGHTKRAVTE
暂无评分
Steamfault - StP - LIGHTKRAVTE
2025年5月29日 20时 ~ 攻略中
已累计游玩6个月24天
全球累计销量超过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


telegram banner (1).png


1210 x 50(蓝底).png

cloudcone