项目开发中遇到导入表格常见的就是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