第一種方法：
注意事項:
導出的數據量 > 1000時加載開始緩慢..
按正規程序應該是 前端傳條件, 后端生成excel 傳給前端, (這里先不展示具體的前后端代碼了..)
XlsxOc excel導出
前端excel導出
安裝依賴
npm i xlsx-oc --save
參數說明
導 出
| 位置 | 參數（變量名可變） | 說明 | 類型 | 默認 |
| 第一個參數 | header | 表頭 | 數組 | -- |
| 第二個參數 | list | 內容部分 | 數組 | -- |
| 第三個參數 | fileName | Excel表格的名稱（例子：fileName = "表格1.xlsx"） | 字符串 | -- |
基本用法
最簡單的用法。例：
import { exportExcel } from 'xlsx-oc';
const exportDefaultExcel = () => {
const list = [{
key: '1',
name: '小剛',
sm: '歌手',
lx: '流行'
}, {
key: '2',
name: '汪峰',
sm: '歌手',
lx: '搖滾'
}];
const header = [
{ k: 'key', v: '序號' },
{ k: 'name', v: '名稱' },
{ k: 'sm', v: '說明' },
{ k: 'lx', v: '類型' }
];
const fileName = "這個Excel表格的名字.xlsx";
exportExcel(header, list, fileName);
}
// render
<Button onClick={() => exportDefaultExcel()}>導出</Button>
第二種方法：
網上抄的一種可以導入 / 導出 Excel 的方法
項目需求，需要導入和導出表單，發現前端已經強大到無所不能（可惜我有點懶，學的並不勤快）
因此使用到js-xlsx，附上github地址:https://github.com/SheetJS/js-xlsx
導入表單
1.控制台安裝
$ npm install xlsx
2.在js文件中引入
import XLSX from 'xlsx'; import ExcelUtil from '../../utils/excelUtil'; //注：excelUtil.js是我自定義的關於表單的操作模塊
3.函數聲明
function importExcel(file){ // 獲取上傳的文件對象 const { files } = file.target; // 通過FileReader對象讀取文件 const fileReader = new FileReader(); fileReader.onload = event => { try { const { result } = event.target; // 以二進制流方式讀取得到整份excel表格對象 const workbook = XLSX.read(result, { type: 'binary' }); let data = []; // 存儲獲取到的數據 // 遍歷每張工作表進行讀取（這里默認只讀取第一張表） for (const sheet in workbook.Sheets) { if (workbook.Sheets.hasOwnProperty(sheet)) { // 利用 sheet_to_json 方法將 excel 轉成 json 數據 data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet])); // break; // 如果只取第一張表，就取消注釋這行 } } console.log(data); } catch (e) { // 這里可以拋出文件類型錯誤不正確的相關提示 console.log('文件類型不正確'); return; } }; // 以二進制方式打開文件 fileReader.readAsBinaryString(files[0]); }
4.使用
<input type='file' accept='.xlsx, .xls' onChange={(e)=>{ExcelUtil.importExcel(e)} }/>
5.結果
控制台打印出結果：
導出表單
第一第二步同上
3.函數聲明
function exportExcel(headers, data, fileName = '請假記錄表.xlsx') { const _headers = headers .map((item, i) => Object.assign({}, { key: item.key, title: item.title, position: String.fromCharCode(65 + i) + 1 })) .reduce((prev, next) => Object.assign({}, prev, { [next.position]: { key: next.key, v: next.title } }), {}); const _data = data .map((item, i) => headers.map((key, j) => Object.assign({}, { content: item[key.key], position: String.fromCharCode(65 + j) + (i + 2) }))) // 對剛才的結果進行降維處理（二維數組變成一維數組） .reduce((prev, next) => prev.concat(next)) // 轉換成 worksheet 需要的結構 .reduce((prev, next) => Object.assign({}, prev, { [next.position]: { v: next.content } }), {}); // 合並 headers 和 data const output = Object.assign({}, _headers, _data); // 獲取所有單元格的位置 const outputPos = Object.keys(output); // 計算出范圍 ,["A1",..., "H2"] const ref = `${outputPos[0]}:${outputPos[outputPos.length - 1]}`; // 構建 workbook 對象 const wb = { SheetNames: ['mySheet'], Sheets: { mySheet: Object.assign( {}, output, { '!ref': ref, '!cols': [{ wpx: 45 }, { wpx: 100 }, { wpx: 200 }, { wpx: 80 }, { wpx: 150 }, { wpx: 100 }, { wpx: 300 }, { wpx: 300 }], }, ), }, }; // 導出 Excel XLSX.writeFile(wb, fileName); }
4.定義表頭和數據項
const initColumn = [{ title: '姓名', dataIndex: 'name', key: 'name', className: 'text-monospace', }, { title: '年級', dataIndex: 'grade', key: 'grade', }, { title: '部門', dataIndex: 'department', key: 'department', }]; let attendanceInfoList = [ { name:"張三", grade:"2017級", department:"前端部門" }, { name:"李四", grade:"2017級", department:"程序部門" }];
5.使用
<button type="primary" onClick={() => {ExcelUtil.exportExcel(initColumn, attendanceInfoList,"人員名單.xlsx")}}>導出</button>
6.結果
完整代碼
//excelUtil.js import XLSX from 'xlsx'; import React,{useState,useEffect} from 'react'; function importExcel(file){ // 獲取上傳的文件對象 const { files } = file.target; // 通過FileReader對象讀取文件 const fileReader = new FileReader(); fileReader.onload = event => { try { const { result } = event.target; // 以二進制流方式讀取得到整份excel表格對象 const workbook = XLSX.read(result, { type: 'binary' }); let data = []; // 存儲獲取到的數據 // 遍歷每張工作表進行讀取（這里默認只讀取第一張表） for (const sheet in workbook.Sheets) { if (workbook.Sheets.hasOwnProperty(sheet)) { // 利用 sheet_to_json 方法將 excel 轉成 json 數據 data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet])); // break; // 如果只取第一張表，就取消注釋這行 } } console.log(data); } catch (e) { // 這里可以拋出文件類型錯誤不正確的相關提示 console.log('文件類型不正確'); return; } }; // 以二進制方式打開文件 fileReader.readAsBinaryString(files[0]); } function exportExcel(headers, data, fileName = '請假記錄表.xlsx') { const _headers = headers .map((item, i) => Object.assign({}, { key: item.key, title: item.title, position: String.fromCharCode(65 + i) + 1 })) .reduce((prev, next) => Object.assign({}, prev, { [next.position]: { key: next.key, v: next.title } }), {}); const _data = data .map((item, i) => headers.map((key, j) => Object.assign({}, { content: item[key.key], position: String.fromCharCode(65 + j) + (i + 2) }))) // 對剛才的結果進行降維處理（二維數組變成一維數組） .reduce((prev, next) => prev.concat(next)) // 轉換成 worksheet 需要的結構 .reduce((prev, next) => Object.assign({}, prev, { [next.position]: { v: next.content } }), {}); // 合並 headers 和 data const output = Object.assign({}, _headers, _data); // 獲取所有單元格的位置 const outputPos = Object.keys(output); // 計算出范圍 ,["A1",..., "H2"] const ref = `${outputPos[0]}:${outputPos[outputPos.length - 1]}`; // 構建 workbook 對象 const wb = { SheetNames: ['mySheet'], Sheets: { mySheet: Object.assign( {}, output, { '!ref': ref, '!cols': [{ wpx: 45 }, { wpx: 100 }, { wpx: 200 }, { wpx: 80 }, { wpx: 150 }, { wpx: 100 }, { wpx: 300 }, { wpx: 300 }], }, ), }, }; // 導出 Excel XLSX.writeFile(wb, fileName); } export default {importExcel,exportExcel};