导航

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

侧边栏
热门文章
1页面
程序员老黄历&求签
热度
623
2推文
由于石油供应紧张,家附近超市货架上的薯片变成黑白包装了。
热度
389
3博文
《上伊那牡丹,酒醉身姿似百合花般》圣地巡礼之杂司谷旧传教士馆
热度
234
4博文
3DS模拟器简体中文字库 | Citra3ds字库 | 符文工房4乱码解决字库 | shared_font.bin
热度
208
5推文
说一个恐怖故事。 凌晨被门铃惊醒。 看了眼时钟,才 1 点,心想大半夜的。 于是通过门铃监控发现没有人……怀疑是做梦梦到门铃响了? 然后顺便去上了个厕所。 回到卧室看了眼时钟,现在是凌晨 3 点!? 吓得只能打打游戏来缓解恐怖情绪。 早上醒来感觉自己可能是做梦,但是看了眼账单确实有凌晨 3 点的消费记录。
热度
182
6博文
探访日本的废校:《中二病也要谈恋爱!》圣地巡礼之杜鹃花学校(原镰挂小学)
热度
130
7博文
回顾维基萌的2025
热度
117
8推文
试着让AI把之前的恐怖故事画成漫画。 试了多次,总有一些不符合逻辑的地方,真的恐怖极了😨。
热度
116
9推文
让AI生成了一个记账网页应用。 完全按照我自己的需求定制的记账应用。当然也有一定的通用性。 支持响应式布局,所以手机也能用。 本人只贡献了需求和修改了一丢丢UI体验。 成品还是很满意的,看来AI时代,小工具根本不需要下什么APP了。 直接自己定制应用的好时代来了呀! 项目地址:https://github.com/eeg1412/wikimoeBookkeeping ※截图是测试数据,不是我发财了。
热度
104
10页面
友链
热度
91
最新评论
广树管理员
2026-06-20 17:51
@资深小白:是这样的😇留下睡醒的痕迹
广树管理员
2026-06-20 17:51
@是垣君哦:本站的特色功能
广树管理员
2026-06-20 17:50
@是垣君哦:可以的哦
广树管理员
2026-06-20 17:50
@凛:是吗?头一回说有刷剧的感觉
广树管理员
2026-06-20 17:49
@Ringnee:似乎没有
攻略中
传颂之物:循白之证
暂无评分
PS5传颂之物:循白之证
2026年5月31日 19时 ~ 攻略中
已累计游玩2周6天
《传颂之物:循白之证》是 AQUAPLUS 开发、Shiravune 发行的《传颂之物》系列动作 RPG。故事发生在大国“大和”恢复和平之后:奥修特尔、御雷、宗近、修娘等人击退敌国阿瓦什兰的侵略,本应迎来安宁,但各地却陆续出现看似毫无关联的怪异现象,并逐渐指向同一个源头;随着三条线索彼此重叠,众人再次踏上旅程,而旅途尽...
告别回忆 双想 ~Not always true~
暂无评分
Steam告别回忆 双想 ~Not always true~
2026年3月10日 22时 ~ 攻略中
已累计游玩3个月12天
“我觅见了生命中的唯一,而后——”
亚路塔:狐狸狐途的面包冒险
暂无评分
Steam亚路塔:狐狸狐途的面包冒险
2026年2月12日 19时 ~ 攻略中
已累计游玩4个月8天
一场席卷全世界的面包革命现在开始! 主人公查雅阴错阳差之下,开始了在荒废的岛屿上经营面包店的生活。 出外冒险搜集食材、研发崭新面包配方、遇见性格各异的伙伴们,建造更丰富的设施,用面包香气使无人问津的广场再次热闹起来!
ToHeart
暂无评分
SteamToHeart
2025年6月26日 19时 ~ 攻略中
已累计游玩11个月29天
AQUAPLUS推出的“温暖人心的校园恋爱游戏”将以高清全3D形式焕新归来!
fault - StP - LIGHTKRAVTE
暂无评分
Steamfault - StP - LIGHTKRAVTE
2025年5月29日 20时 ~ 攻略中
已累计游玩1年
全球累计销量超过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

收款.png


file_000000008460720687635c008459256b.png