Bootstrap

vue导入excel进度条_Vue 前端开发——导入Excel/Csv

项目开发中遇到导入表格常见的就是excel和csv 格式,一般情况下我们会前端首先得到这个表格里面的数据,然后再把数据发送给后端,也有的是直接上传文件传给后台后台自己处理,这样就不好控制上传前预览和处理数据,如果不需要预览直接上传的需求,那还是直接上传文件交给后台处理,本文实例是基于vue+elementu-ui 表格去实现。

需要的依赖库--papaparse,xlsx

https://www.papaparse.com/

1.安装

npm install --save papaparse xlsx

2.文档地址

papaparse:https://www.papaparse.com/

xlsx: https://github.com/SheetJS/sheetjs

函数处理

1.csv 导入函数import papa from 'papaparse';export function csvImport(file){ return new Promise((resolve, reject) => { papa.parse(file, { header: true, skipEmptyLines: true, complete: (results, file) => { resolve(results); } }); });}

2.excel 导入函数

export function excelImport(file, url) { return new Promise((resolve, reject) => { const reader = new FileReader(); // 文件流转Bina

;