导航

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

侧边栏
热门文章
1推文
给《悠哉日常大王》的旧小川小学校下里分校圣地巡礼剪辑了完整的圣地巡礼视频: https://www.bilibili.com/video/BV1Qm5vzMEzY/
热度
390
2页面
程序员老黄历&求签
热度
325
3博文
探访《蜡笔小新》老家——春日部游记
热度
221
4推文
日本著名的博客平台goo blog宣布2025年11月18日停止服务。 很可惜呀,这个博客平台存有大量日本圣地巡礼的内容。随着goo blog的停止,圣地巡礼尤其是老作品的圣地巡礼的资料将会迎来断崖式的减少。
热度
195
5推文
今天去看了首部初音未来的电影《剧场版 世界计划 破碎的世界与无法歌唱的未来》。 说是初音未来的电影,但其实是手游《世界计划》的剧场版。好像有挺多人看到是初音未来的电影就去看了,结果发现并不全是😅。其实在宣传海报中,初音未来后面的那些人才是主角。 不过,我也是那些没玩过手游的观众之一。其实整场看下来问题也不是很大,就是对于人物关系和世界观的设定可能会有些问题。电影其实也很贴心地在剧情开头,大致以剧情的形式展示了手游中的五个团体的人物及其性格,但感觉还是有些杯水车薪,约等于看个眼熟。 此次的电影是第一次购买应援场。所谓的应援场,就是能在电影院里像是听演唱会一样挥舞荧光棒和尽情呐喊。看着前排那些粉丝看到自己喜欢角色时的呐喊,以及演唱会环节的打CALL,应援场确实是很有意思的一种电影观看方式呢! 剧情方面,属于看了开头大概能猜到整部动画的剧情走向。不过,通过演唱会的气氛渲染,甚至还感受到了一丝丝的感动。 总体来说,对于手游的粉丝来说可能是嘉年华般的狂喜,对于没接触过手游的路人来说也能一定程度融入其中,属于一部不错的粉丝向电影(不管是手游粉丝还是初音未来粉丝)。 首周电影特典是CD和游戏内的兑换码。送CD这种形式还第一次遇到,官方大气!
热度
156
6博文
3DS模拟器简体中文字库 | Citra3ds字库 | 符文工房4乱码解决字库 | shared_font.bin
热度
91
7页面
活动
热度
65
8页面
友链
热度
65
9推文
给自己看过的2025年的1月新番加了评分和评价。
热度
52
10博文
真相永远只有一个!《名侦探柯南》特别音乐会2025
热度
52
最新评论
广树管理员
2025-04-18 21:49
@Zrzzz:其实更直观点还可以传全景视频,只不过不想露脸。
Zrzzz
2025-04-18 21:44
@广树:视频感觉空间感更直观啦!期待我们广树老师更多巡礼vlog(˶‾᷄ ⁻̫ ‾᷅˵)
广树管理员
2025-04-18 20:58
@Zrzzz:嘿嘿,能让大佬喜欢真的太好啦
Zrzzz
2025-04-18 20:50
视频好好!!校庭开放感好强 室内采光也好好
广树管理员
2025-04-18 06:45
@空我:上世纪夸张了呀
攻略中
星空列车与白的旅行
暂无评分
Steam星空列车与白的旅行
2025年2月22日 22时 ~ 攻略中
已累计游玩1个月25天
乘坐的列车,划破夜空,飞驰在星空之下,令人心旷神怡——这可真是场超值之旅。舒爽夜风吹拂下的随心独旅中,我邂逅了随性的乘客,可人怜爱的乘务员。以及……猫耳少女?这场旅行,究竟会在她身上,留下了些什么呢?
界之轨迹
暂无评分
PS5界之轨迹
2024年9月28日 14时 ~ 攻略中
已累计游玩6个月22天
导力之父爱普斯泰因预言的世界末日即将到来,此时东大陆共和国所研发的导力火箭划破天空,即将探访这个世界的边界。 与此同时万事屋的青年们,正聚集在奥雷德自治州,与集结而来的各方势力,一同看望着这科技奇点。 人们这次是否能认识到世界的真实呢?
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