Vue导入Excel文件并转换为JSON数据

忆小陌

已于 2023-07-24 08:50:53 修改

阅读量1.5k

点赞数 4

文章标签： vue.js excel json

于 2023-05-19 11:10:13 首次发布

本文链接：https://blog.csdn.net/m0_62022586/article/details/130762624

版权

文章介绍了如何通过npm安装xlsx库，然后在项目中导入并使用，结合elementUI的el-upload组件实现Excel文件的上传。当文件上传后，利用FileReader读取二进制数据，通过xlsx库解析Excel内容并转换为JSON格式。

摘要由CSDN通过智能技术生成

1.下载插件：

npm install xlsx --save

2.在需要使用的页面引入：

import { read, utils } from 'xlsx';

3.使用elementUI中的el-upload组件实现：

<el-upload
	:before-upload="upload"
    class="upload-demo"
    accept=".xlsx,.xls"
    :show-file-list="false"
    drag
	action="https://jsonplaceholder.typicode.com/posts/"
    multiple
>
	<i class="el-icon-upload"></i>
    <div class="el-upload__text">
    	将文件拖到此处，或
        <em>点击上传</em>
    </div>
</el-upload>

4.上传后的函数：

upload(file, fileList) {
	let files = { 0: file };
    this.readExcel1(files);
},
readExcel1(files) {
	// 如果没有文件名
    if (files.length <= 0) {
    	return;
    }
    if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
        this.$message.error('上传格式不正确，请上传xls或者xlsx格式');
        return;
     }
     const fileReader = new FileReader();
     fileReader.onload = ev => {
     	try {
        	const data = ev.target.result;
            const workbook = read(data, {
            	type: 'binary',
            });
            // 取第一张表
            const wsname = workbook.SheetNames[0];
            // 生成json表格内容
            const ws = utils.sheet_to_json(workbook.Sheets[wsname]);
            console.log(ws);
            // 后续数据的处理
            
         } catch (e) {
         	return false;
         }
    };
	fileReader.readAsBinaryString(files[0]);
},