導(dǎo)出excel

• 安裝依賴
  npm install -S file-saver
npm install -S xlsx
npm install -D script-loader

• 下載 Export2Excel.js 文件
  這個文件沒在npm上找到，所以在網(wǎng)上找的文件放入項目中。
  Export2Excel.js (復(fù)制demo中的Export2Excel.js代碼保存到項目static文件夾下，可根據(jù)自己的習(xí)慣保存路徑)

• 項目中使用

1. 引入 export_json_to_excel 方法 (使用相對路徑)
   import { export_json_to_excel } from '../static/Export2Excel'
2. 格式化表格數(shù)據(jù)
   export_json_to_excel 方法中需要用到的數(shù)據(jù)和我們在網(wǎng)頁中渲染到table上的數(shù)據(jù)不同，需要格式化

/**
 *  格式數(shù)據(jù)
 *  @filterVal  格式頭
 *  @tableData  用來格式的表格數(shù)據(jù)
 */
formatJson(filterVal, tableData) {
    return tableData.map(v => {
        return filterVal.map(j => {
                return v[j]
            })
        }
    )
}

表格數(shù)據(jù)格式轉(zhuǎn)換圖.png

3. 調(diào)用 export_json_to_excel 方法

// 導(dǎo)出按鈕點擊事件函數(shù)
handleExport() {
    var tHeader = ['日期', '姓名', '省份', '市區(qū)', '地址', '郵編']
    var filterVal = ['date', 'name', 'province','city','address','zip']
    var filename = 'demoExcel'
    var data = this.formatJson(filterVal, this.tableData)
    export_json_to_excel({
        header: tHeader,
        data,
        filename
    })
},

導(dǎo)入excel

• 安裝依賴
  npm install -S xlsx
• html

<label for="import">導(dǎo)入</label>
<input
    type="file"
    id="import"
    @change="handleImport"
    accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,
    application/vnd.ms-excel"
/>

• js

import XLSX from "xlsx";
/**
 *  導(dǎo)入excel的input的change 函數(shù)
 *  @event 事件對象
 */
handleImport(event) {
    // FileReader 對象允許Web應(yīng)用程序異步讀取存儲在用戶計算機(jī)上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容
    let fileReader = new FileReader();
    var file = event.currentTarget.files[0];
    // 回調(diào)函數(shù)
    fileReader.onload = ev => {
        try {
            let data = ev.target.result;
            let workbook = XLSX.read(data, {
                type: "binary"
            });
            // excel讀取出的數(shù)據(jù)
            let excelData= XLSX.utils.sheet_to_json(
                workbook.Sheets[workbook.SheetNames[0]]
            );
            // 將上面數(shù)據(jù)轉(zhuǎn)換成 table需要的數(shù)據(jù)
            let arr = [];
            excelData.forEach(item => {
                let obj = {};
                obj.date = item["日期"];
                obj.name = item["姓名"];
                obj.province = item["省份"];
                obj.city = item["市區(qū)"];
                obj.address = item["地址"];
                obj.zip = item["郵編"];
                arr.push(obj);
            });
            this.tableData = [...arr];
        } catch (e) {
            window.alert("文件類型不正確！");
            return false;
        }
    };
    // 讀取文件 成功后執(zhí)行上面的回調(diào)函數(shù)
    fileReader.readAsBinaryString(file);
}

點擊這里查看完整demo

倉庫地址：https://kzone0520.coding.net/public/Export2Excel-Demo/Export2Excel-Demo/git