項目開發(fā)中遇到導(dǎo)入表格常見的就是excel和csv 格式，一般情況下我們會前端首先得到這個表格里面的數(shù)據(jù)，然后再把數(shù)據(jù)發(fā)送給后端，也有的是直接上傳文件傳給后臺后臺自己處理，這樣就不好控制上傳前預(yù)覽和處理數(shù)據(jù)，如果不需要預(yù)覽直接上傳的需求，那還是直接上傳文件交給后臺處理，本文實例是基于vue+elementu-ui 表格去實現(xiàn)。

需要的依賴庫--papaparse，xlsx

https://www.papaparse.com/

1.安裝

npm install --save papaparse xlsx

2.文檔地址

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

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

函數(shù)處理

1.csv 導(dǎo)入函數(shù)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 導(dǎo)入函數(shù)

export function excelImport(file, url) { return new Promise((resolve, reject) => { const reader = new FileReader(); // 文件流轉(zhuǎn)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; }; // 處理獲得頭部數(shù)據(jù) 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 <= range.e.c; ++C) { var cell = sheet[ xlsx.utils.encode_cell({ c: C, r: R }) ]; var hdr = 'UNKNOWN ' + C; if (cell && cell.t) hdr = xlsx.utils.format_cell(cell); headers.push(hdr); } return headers; }; reader.onload = e => { 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的數(shù)據(jù) 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); // 常用導(dǎo)出類型 resolve({ header, results }); }; reader.readAsArrayBuffer(file); });}

導(dǎo)入測試

選擇要導(dǎo)入的數(shù)據(jù)

導(dǎo)入讀取的數(shù)據(jù)

組件封裝

把csv和xlsx 的導(dǎo)入函數(shù)集合到一個js文件中后續(xù)使用調(diào)用

import.js

tao-import 組件

使用組件

組件參數(shù)說明：

type： 導(dǎo)入類型-csv/xlsx

errorData: 導(dǎo)入失敗錯誤數(shù)據(jù)

import： 導(dǎo)入方法-或者數(shù)據(jù)

效果展示

導(dǎo)入效果圖

總結(jié)

本文只介紹展示了前端處理，沒有加接口調(diào)用實例，具體后臺導(dǎo)入的時候需要什么格式的數(shù)據(jù)，實際情況實際處理，基本代碼差不多都在上面了，完整代碼放碼云上了[upholdjx / tao-form]。

總結(jié)

以上是生活随笔為你收集整理的vue导入excel进度条_Vue 前端开发——导入Excel/Csv的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。