导航

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

侧边栏
热门文章
1页面
程序员老黄历&求签
热度
585
2推文
昨晚的国际互联网经历了一场灾难。 维基萌也被波及到了呢!由于设置了站点检测,昨晚故障警报不停。 一开始还以为维基萌服务器又出问题了,结果一看居然是 Cloudflare ? 看起来是由于 CDN 运营商 Cloudflare 的故障。众多网络服务出现了无法访问的情况。 更要命的是,面板也同时出现故障导致无法临时切换解析地址。 就这样故障从日本时间将近晚上9点,一直持续到了晚上11点过后,维基萌的访问才安定下来。 事后看来是由于不正确的配置导致的此次灾难。具体可以看官方的报告。 https://blog.cloudflare.com/18-november-2025-outage/ 不得不说今年由于大厂的失误导致的互联网服务灾难是不是太多了一点?
热度
559
3页面
友链
热度
117
4推文
作为凉宫春日等人就读的“北高”的原型,其校园风景在动画中得以重现的兵库县立西宫北高等学校,将在2027年3月末以“西宫北高校”的名义关闭,并由“西宫苦乐园高校”接管。 一直以来,许多粉丝都将西宫北高作为凉宫春日的“圣地”来访问。虽然该校此前从未对外开放校内,但这次将首次举办校内公开企划! 在这次活动中,大家可以欣赏动画中出现的场景,并在校园内进行拍照留念等活动。 ※ 截至2025年11月14日,入场门票已全部售罄,且不会追加销售。请注意,未持有入场门票者将无法进入会场。
热度
90
5页面
足迹
热度
78
6页面
活动
热度
65
7页面
游戏
热度
65
8页面
追番
热度
65
9推文
《摇曳露营△》联合日本静冈县推出了新的圣地巡礼地图。 这周要去的圣地巡礼正是《摇曳露营△》第二季中的伊豆半岛,也就是巡礼地图的右下角这块区域。 可以看到光是伊豆半岛这块区域的巡礼地点就非常多。 此次行程准备用时2天,能逛多少就算多少。 《摇曳露营△》× 静冈县官方:https://yurucamp-shizuoka.com
热度
52
10页面
阅读
热度
39
最新评论
广树管理员
2025-11-20 22:03
虽然不是真正意义上的闭校。但是作为作品中的那所学校因为人口老龄化最后并校与更名,还是有些可惜的。 很想去,但是似乎知道的有些太迟了呢。
广树管理员
2025-11-20 11:26
@小彦:淡定,日本民众根本不关心这些
广树管理员
2025-11-20 11:26
@老张博客:是呀
广树管理员
2025-11-20 11:26
@石樱灯笼:看报告上次这么大规模是19年的样子?
老张博客
2025-11-20 11:03
半个互联网都瘫了!
攻略中
全民高尔夫环球之旅
暂无评分
Steam全民高尔夫环球之旅
2025年9月07日 12时 ~ 攻略中
已累计游玩2个月14天
《全民高尔夫 环球之旅》除了能体验到与过去作品相同的乐趣、爽快与深奥之外, 还有着以精美图像设计而成、个性丰富的角色们与以世界各地为主题的球场, 以及能让所有人热血沸腾的全新模式等等,是本系列的全新力作!
ToHeart
暂无评分
SteamToHeart
2025年6月26日 19时 ~ 攻略中
已累计游玩4个月27天
AQUAPLUS推出的“温暖人心的校园恋爱游戏”将以高清全3D形式焕新归来!
fault - StP - LIGHTKRAVTE
暂无评分
Steamfault - StP - LIGHTKRAVTE
2025年5月29日 20时 ~ 攻略中
已累计游玩5个月25天
全球累计销量超过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