項目開發中遇到導入表格常見的就是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(); // 文件流轉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 <= 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的數據 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); });}

導入測試

選擇要導入的數據

導入讀取的數據

組件封裝

把csv和xlsx 的導入函數集合到一個js文件中后續使用調用

import.js

tao-import 組件

使用組件

組件參數說明：

type： 導入類型-csv/xlsx

errorData: 導入失敗錯誤數據

import： 導入方法-或者數據

效果展示

導入效果圖

總結

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。