Vue 前端开发

#Vue 前端开发| 来源: 网络整理| 查看: 265

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

需要的依赖库--papaparse，xlsx Vue 前端开发——导入Excel/Csv

1.安装

npm install --save papaparse xlsx

2.文档地址

papaparse：/

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(); // 文件流转BinaryString const fixdata = data => { let [o, l, w] = ['', 0, 1024]; for (; l < data.byteLength / w; ++l) { o += String.fromCharCode.apply( null, new Uint8Array(data.slice(l * w, l * w + w)) ); } o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w))); return o; }; // 处理获得头部数据 const getHeaderRow = sheet => { const headers = []; const range = xlsx.utils.decode_range(sheet['!ref']); // 表示所有单元格的范围 let C; const R = range.s.r; for (C = range.s.c; C { const data = e.target.result; const fixedData = fixdata(data); const workbook = xlsx.read(btoa(fixedData), { type: 'base64' }); const firstSheetName = workbook.SheetNames[0]; // 获取Sheets中第一个Sheet的名字 const worksheet = workbook.Sheets[firstSheetName]; // 获取第一个Sheet的数据 const header = getHeaderRow(worksheet); /** * xlsx.utils.sheet_to_csv：生成CSV格式 * xlsx.utils.sheet_to_txt：生成纯文本格式 * xlsx.utils.sheet_to_html：生成HTML格式 * xlsx.utils.sheet_to_json：输出JSON格式 */ const results = xlsx.utils.sheet_to_json(worksheet); // 常用导出类型 resolve({ header, results }); }; reader.readAsArrayBuffer(file); });}导入测试选择要导入的数据 import * as importFun from './import.js'export default { methods: { handleUpload(file) { importFun.excelImport(file).then(res => { console.log(res, 'ff') }) }, }} Vue 前端开发——导入Excel/Csv

导入读取的数据

组件封装

把csv和xlsx 的导入函数集合到一个js文件中后续使用调用

import.js

tao-import 组件

使用组件 export default { data() { return { errorData: { columns: [], data: [] } } }, methods: { handleImport(data) { console.log(data, 'data') // 调用接口 } }}

组件参数说明：

type：导入类型-csv/xlsx

errorData: 导入失败错误数据

import：导入方法-或者数据

效果展示

导入效果图

总结

本文只介绍展示了前端处理，没有加接口调用实例，具体后台导入的时候需要什么格式的数据，实际情况实际处理，基本代码差不多都在上面了，完整代码放码云上了[upholdjx / tao-form]。

【本文地址】

公司简介

联系我们