导航

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

侧边栏
最新评论
广树管理员
2025-12-16 20:08
@老张博客:还差得远
广树管理员
2025-12-16 20:07
@旅行呀:大佬是群友吗
老张博客
2025-12-16 10:36
日本快被你跑遍了吧
旅行呀
2025-12-15 20:41
我也来申请友链啦₍˄·͈༝·͈˄*₎◞ ̑̑ 名称:旅行呀的小窝 简介:分享日常,好的项目,部署教程,猫猫 链接:https://www.grxiao.cn/ 图标:https://grxiao.cn/static/userAvatar/11763862419056837.png
Zrzzz
2025-12-15 19:19
@广树:いつか🥺
攻略中
SILENT HILL f
暂无评分
PS5SILENT HILL f
2025年12月13日 15时 ~ 攻略中
已累计游玩4天
主人公是居住在群山环绕的日本乡村小镇·戎之丘的高中生·深水雏子。 她的日常生活因为神秘白色“怪物”的出现突然崩塌。 她一边在面目全非的熟悉小镇中探索、战斗、解谜,一边迎来属于她的“结局”。
魔法少女的魔女审判
暂无评分
Steam魔法少女的魔女审判
2025年11月27日 22时 ~ 攻略中
已累计游玩2周6天
迎接少女们的,是一场残酷的死亡游戏……在即将来临的“魔女审判”中,打破魔法和谎言的幻影,揪出混入少女之中的“魔女”吧。这部最新的魔法辩论×悬疑ADV作品,由日本原创品牌“Acacia”为您呈献。
全民高尔夫环球之旅
暂无评分
Steam全民高尔夫环球之旅
2025年9月07日 12时 ~ 攻略中
已累计游玩3个月11天
《全民高尔夫 环球之旅》除了能体验到与过去作品相同的乐趣、爽快与深奥之外, 还有着以精美图像设计而成、个性丰富的角色们与以世界各地为主题的球场, 以及能让所有人热血沸腾的全新模式等等,是本系列的全新力作!
ToHeart
暂无评分
SteamToHeart
2025年6月26日 19时 ~ 攻略中
已累计游玩5个月24天
AQUAPLUS推出的“温暖人心的校园恋爱游戏”将以高清全3D形式焕新归来!
fault - StP - LIGHTKRAVTE
暂无评分
Steamfault - StP - LIGHTKRAVTE
2025年5月29日 20时 ~ 攻略中
已累计游玩6个月22天
全球累计销量超过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