导航

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

侧边栏
热门文章
1推文
酒店免费把我的双人床升级成了2张双人床!空间是大了许多,但是1个住有些浪费呀。
热度
506
2页面
程序员老黄历&求签
热度
299
3推文
飞猪说这一班飞机没有餐食,结果特意吃饱了上飞机,结果突然端出来量大管饱的飞机餐我都懵了。 这是一条来自高空的推文。
热度
195
4推文
抵达台北开始6天5夜的台湾之旅!
热度
142
5推文
《苍之彼方的四重奏 10th Anniversary Box》预计2025年3月28日发售,售价为含税19800日元(约922人民币)。 其中如果购买了sprite LIMITED EDITION或FILMIC EDITION版的话,还有机会将名字(猜测)登在结尾字幕中! sprite LIMITED EDITION版售价39800日元(约1853人民币),FILMIC EDITION版售价149800日元(约6973人民币)。 感觉如果花1853人民币就能把"维基萌"打在游戏结尾字幕中也似乎不错的样子?🤔 《苍之彼方的四重奏 10th Anniversary Box》专题页面:https://sprite.net/aokana/10thanniversary/box
热度
130
6博文
《孤独摇滚》圣地巡礼——金泽八景
热度
117
7页面
友链
热度
91
8推文
今天去看了首部初音未来的电影《剧场版 世界计划 破碎的世界与无法歌唱的未来》。 说是初音未来的电影,但其实是手游《世界计划》的剧场版。好像有挺多人看到是初音未来的电影就去看了,结果发现并不全是😅。其实在宣传海报中,初音未来后面的那些人才是主角。 不过,我也是那些没玩过手游的观众之一。其实整场看下来问题也不是很大,就是对于人物关系和世界观的设定可能会有些问题。电影其实也很贴心地在剧情开头,大致以剧情的形式展示了手游中的五个团体的人物及其性格,但感觉还是有些杯水车薪,约等于看个眼熟。 此次的电影是第一次购买应援场。所谓的应援场,就是能在电影院里像是听演唱会一样挥舞荧光棒和尽情呐喊。看着前排那些粉丝看到自己喜欢角色时的呐喊,以及演唱会环节的打CALL,应援场确实是很有意思的一种电影观看方式呢! 剧情方面,属于看了开头大概能猜到整部动画的剧情走向。不过,通过演唱会的气氛渲染,甚至还感受到了一丝丝的感动。 总体来说,对于手游的粉丝来说可能是嘉年华般的狂喜,对于没接触过手游的路人来说也能一定程度融入其中,属于一部不错的粉丝向电影(不管是手游粉丝还是初音未来粉丝)。 首周电影特典是CD和游戏内的兑换码。送CD这种形式还第一次遇到,官方大气!
热度
78
9博文
探访《蜡笔小新》老家——春日部游记
热度
78
10推文
看完《孤独摇滚》的总集篇剧场版后篇了。 虽然删减在所难免,但是个人觉得制作组还是在尽量在保留精华。 ED歌曲《Re:Re:》把我惊艳到了,非常熟悉的旋律当时硬是想不起来,回到家查了一下原来第一次听到是在《只有我不在的街道》。 https://www.bilibili.com/video/BV1M5ejeMErR
热度
65
最新评论
广树管理员
2025-04-29 22:48
@夕阳西下:哈哈哈,是这么操作的
夕阳西下
2025-04-29 22:46
一个睡觉,另外一个放衣服
广树管理员
2025-04-29 21:37
@Zrzzz:期待第四季的摇曳露营吧
广树管理员
2025-04-29 21:37
@mikusa:哈哈哈,确实有点出戏
广树管理员
2025-04-29 21:37
@ZeroCounter:是吗?真的被飞机的量吓到了。2块面包,1盒咖喱米饭,1碗沙拉,1碗水果,1杯茶,1杯水。
攻略中
星空列车与白的旅行
暂无评分
Steam星空列车与白的旅行
2025年2月22日 22时 ~ 攻略中
已累计游玩2个月7天
乘坐的列车,划破夜空,飞驰在星空之下,令人心旷神怡——这可真是场超值之旅。舒爽夜风吹拂下的随心独旅中,我邂逅了随性的乘客,可人怜爱的乘务员。以及……猫耳少女?这场旅行,究竟会在她身上,留下了些什么呢?
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