ant design vue 上传组件上传xls文件解析表格(a-table增加数据)

最新推荐文章于 2025-12-17 14:07:30 发布

原创

最新推荐文章于 2025-12-17 14:07:30 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #typescript #es6

本文介绍如何在Ant Design Vue项目中利用xlsx库上传并解析xls文件，将数据填充到a-table中，涉及vue.js、typescript和es6技术。

1、需要安装xlsx（npm install xlsx || yarn add xlsx）

2、html

<a-upload
    class="no-list"
    name="file"
    @change="exportData"
    :beforeUpload="beforeUploada"
>
    <a-button type="primary">上传excel</a-button>
</a-upload>

3、js

import xlsx from 'xlsx';
components: {
    xlsx, // 需要引入
},

4、具体js代码

const exportData = (info: any) => {
    const reader = new FileReader();
    reader.onload = e => {
        let data: any;
        let workbook: any;
        let result: any = [];
        if (e.target) {
            data = e.target.result;
            workbook = xlsx.read(data, { type: 'binary' });

            for (let item in workbook.SheetNames) {
                let SheetName = workbook.SheetNames[item];
                let sheetInfos = workbook.Sheets[SheetName];
                let outdata = xlsx.utils.sheet_to_json(sheetInfos);

                outdata.map((val: any, index: number) =