目錄

• 一、技術選型
  
• 二、技術實現
  
• 使用 -on-excel 外掛實現
• 1.安裝 vue-json-excel 依賴
  
• 2.註冊外掛到 vue 例項
  
• 3.使用方式
  
• 基於 sheetJS-xlsx 解析器的 xlsx-style 實現（推薦）
• 1.安裝依賴
• 2.使用方法
• 三、參考資料
• 總結

一、技術選型

1.使用 vue-json-excel 外掛實現

優點：簡單便捷，易上手，開箱即用；

缺點：不支援 excel 表格樣式設定，且支援功能比較單一；

2.基於 sheetJS-xlsx 解析器的 xlsx-style 實現（推薦）

優點：支援格式眾多，支援 excel 表格樣式設定，功能強大，可控性高，可讀取和匯出excel；

缺點：使用較為複雜，上手成本較大，且高階功能需要收費，但該功能可以藉助 xlsx-style 實現；

二、技術實現

使用 vue-json-excel 外掛實現

1.安裝 vue-json-excel 依賴

npm install -S vue-json-excel

2.註冊外掛到 vue 例項

import Vue from "vue";
import JsonExcel from "vue-json-excel";

Vue.component("downloadExcel",JsonExcel);

3.使用方式

在需要觸發匯出事件的外出包裹 download-excel 元件

該元件支援的屬性可參考vue-json-excel 的 文件

<download-excel :data="json_data">
  Download Data
  <img src="download_icon.png" />
</download-excel>

首先需要處理匯出到 excel 檔案的資料內容，分別是以下資料：

• 表頭名資料 json_fields：可以選擇要匯出的欄位，併為欄位分配標籤。該資料型別為 Object ，key 對應的是標籤，value 對應的是 JSON 欄位，將匯出與資料列表相同欄位的資料。如果需要自定義匯出的資料，可以定義回撥函式。
  
• 表格資料 json_data：該資料型別為 Array，儲存了需要匯出的資料內容；

let json_fields = {
  // fieldLabel(表頭名)，attributeName(對應欄位名)
  fieldLabel: attributeName,// 使用回撥自定義匯出資料
  anotherFieldLabel: {
    field: anotherAttributeName,callback: (value) => {
      return `formatted value ${value}`;
    },},};

let json_data = [
    {
        attributeName: value1,anotherAttributeName: value2
    },{
        attributeName: value3,anotherAttributeName: value4
    }
];

處理完資料之後則可以將資料傳入 download-excel 元件中，該元件沒有任何樣式，只需要設定內部包裹的元素樣式即可；

<download-excel
  class="btn btn-default"
  :data="json_data"
  :fields="json_fields"
  worksheet="My Worksheet"
  name="filename.xls"
>
  Download Excel (you can customize this with html code!)
</download-excel>

然而在實際的業務場景下，匯出表格資料通常是匯出表格的所有資料，所以在匯出的過程中，需要呼叫請求介面去獲取表格中的所有資料，而呼叫介面獲取資料是非同步執行的過程，該外掛也針對這個場景提供瞭解決方案。

相關案例：

<template>
    <div id="app">
        <downloadexcel
            class            = "btn"
            :fetch           = "fetchData"
            :fields          = "json_fields"
            :before-generate = "startDownload"
            :before-finish   = "finishDownload">
            Download Excel
        </downloadexcel>
    </div>
</template>

<scwACFOSxtript>
import downloadexcel from "vue-json-excel";
import axios from 'axios';

export default {
    name: "App",components: {
        downloadexcel,data(){
        return {
            json_fields: {
                'Complete name': 'name','Date': 'date',}
    },//data
    methods:{
        async fetchData(){
            const response = await axios.get(URL);
            return response.data.holidays;
        },startDownload(){
            alert('show loading');
        },finishDownload(){
            alert('hide loading');
        }
    }
};
</script>

基於 sheetJS-xlsx 解析器的 xlsx-style 實現（推薦）

由於這部分涉及內容較多，後續有需要會封裝該功能

這裡只對封裝的 export2Excel 使用方法進行說明，暫時不對原理進行講解。

該外掛不僅支援 excel 檔案的匯出，也支援檔案匯入功能，並且匯出 excel 檔案的不僅支援 json 資料，也支援 table 匯出；

由於 sheetjs-xlsx 提供的工具庫其高階功能是付費專案，如修改表格樣式等功能，因此選用了基於 sheetjs-xlsx 實現的 xlsx-style 外掛。

相容性：

1.安裝依賴

npm install -S xlsx
npm install -S xlsx-style

而 xlsx-style 外掛在使用的時候會報錯，官方也對該問題給出瞭解決方案，就是在根目錄下的vue.config.js配置檔案新增如下程式碼：

module.exports = {
	configureWebpack: {
    	externals: {
      		'./cptable': 'var cptable'
    	}
  	}
}

還有一種方案是改原始碼，但不推薦使用，就不做說明了。

2.使用方法

這裡封裝了匯出 excel 檔案的方法，其中，檔案下載的功能有兩個方案實現，分別是：

• 通過 a 標籤的檔案下載功能，利用 URL.createObjectURL 方法生成下載連結實現；（本文使用的方法）
• 通過第三方外掛 file-saver 外掛實現檔案下載功能；

js-xlsx 外掛自帶了相關的函式去方便實現不同資料格式的轉換：

• aoa_to_sheet converts an array of arrays of JS data to a worksheet.
• json_to_sheet converts an array of JS objects to a worksheet.
• table_to_sheet converts a DOM TABLE element to a worksheet.
• sheet_add_aoa adds an array of arrays of JS data to an existing worksheet.
• sheet_add_json adds an array of JS objects to an existing worksheet.

下面是封裝的 export2Excel 函式具體程式碼，只需要將程式碼複製到建立的 export2Excel.js 檔案中即可：

/**
 * create by lwj
 * @file 匯出export外掛封裝
 */

import * as styleXLSX from 'xlsx-style'

/**
 * 將 String 轉換成 ArrayBuffer 
 * @method 型別轉換
 * @param {String} [s] wordBook內容
 * @return {Array} 二進位制流陣列
 */
function s2ab (s) {
    let buf = null;

    if (typeof ArrayBuffer !== 'undefined') {
        buf = new ArrayBuffer(s.length);
        let view = new Uint8Array(buf);

        for (let i = 0; i != s.length; ++i) {
            view[i] = s.charCodeAt(i) & 0xFF;
        }

        return buf;
    }

    buf = new Array(s.length);

    for (let i = 0; i != s.length; ++i) {

        // 轉換成二進位制流
        buf[i] = s.charCodeAt(i) & 0xFF;
    }

    return buf;
}

/**
 * 方案一：利用 URL.createObjectURL 下載 （以下選用）
 * 方案二：通過 file-saver 外掛實現檔案下載
 * @method 檔案下載
 * @param {Object} [obj] 匯出內容 Blob 物件
 * @param {String} [fileName] 檔名 下載是生成的檔名
 * @return {void}
 */ 
function saveAs (obj,fileName) {
    let aLink = document.createElement("a");

    if (typeof obj == 'object' && obj instanceof Blob) {
        aLink.href = URL.createObjectURL(obj); // 建立blob地址
    }
    
    aLink.download = fileName;
    aLink.click();
    setTimeout(function () {
        URL.revokeObjectURL(obj);
    },100);
}

/**
 * @method 資料匯出excel
 * @param {Object} [worksheets] 工作表資料內容
 * @param {String} [fileName='ExcelFile'] 匯出excel檔名
 * @param {String} [type='xlsx'] 匯出檔案型別
 */
export default function export2Excel ({
    worksheets,fileName = 'ExcelFile',type = 'xlsx'
} = {}) {

    let sheetNames = Object.keys(worksheets);
    let workbook = {
        SheetNames: sheetNames,//儲存的工作表名
        Sheets: worksheets
    };

    // excel的配置項
    let wopts = {  
        bookType: type,// 生成的檔案型別
        bookSST: false,// 是否生成Shared String Table，官方解釋是，如果開啟生成速度會下降，但在低版本IOS裝置上有更好的相容性
        type: 'binary'  
    }

    // attempts to write the workbook
    let wbout = styleXLSX.write(workbook,wopts);
    let wbBlob = new Blob([s2ab(wbout)],{
        type: "application/octet-stream"
    });

    saveAs(wbBlob,fileName + '.' + type);
}

需要注意幾個問題：

1. xlsx 和 xlsx-style 的預設匯出函式名都是 XLSX ，如果同時匯入的話，需要注意設定別名，避免函式覆蓋出現問題；
2. 如果不想使用 xlsx 外掛www.cppcns.com，只使用 xlsx-style 外掛同樣也是可以的，只是要自己將需要匯出的資料轉換成 worksheet 格式物件，其原理也就是將匯出資料轉換成 worksheet 規定的資料格式，具體可以檢視js-xlsx 文件說明；（可以自己嘗試實現）

然後只需要在需要匯出 excel 的地方呼叫即可，如果對匯出表格樣式有要求的情況下，可以去了解如何配置表格樣式，具體配置方法可以去xlsx-style 文件 中檢視。

如果是 json 資料匯出，需要對錶頭名和欄位進行對映；

相關案例：

import XLSX from 'xlsx';
import export2Excel from '@/assets/utils/export2Excel';

// json 格式
let jsonTable = [{
    "sheet1id": 1,"表頭1": "資料11","表頭2": "資料12","表頭3": "資料13","表頭4": "資料14"
},{
    "sheet1id": 2,"表頭1": "資料21","表頭2": "資料22","表頭3": "資料23","表頭4": "資料24"
}];

// 二維陣列格式
let aoa = [
    ['sheet2id','表頭1','表頭2','表頭3','表頭4'],[1,'資料11','資料12','資料13','資料14'],[2,'資料21','資料22','資料23','資料24']
]

function handleExportExcel () {
    
    // 使用 XLSX 內建的工具庫將 json 轉換成 sheet
    let worksheet1 = XLSX.utils.json_to_sheet(jsonTable);

    // 使用 XLSX 內建的工具庫將 aoa 轉換成 sheet
    let worksheet2 = XLSX.utils.aoa_to_sheet(aoa);

    // 設定 excel 表格樣式
    worksheet1["B1"].s = { 
        font: { 
            sz: 14,bold: true,color: { 
                rgb: "FFFFAA00"
            } 
        },fill: { 
            bgColor: { 
                indexed: 64 
            },fgColor: { 
                rgb: "FFFF00" 
            } 
        } 
    };

    // 單元格合併
    worksheet1["!merges"] = [{
        s: { c: 1,r: 0 },e: { c: 4,r: 0 }
    }];

    export2Excel({
        worksheets: {
            sheet1: worksheet1,sheet2: worksheet2
        },// 匯出excel的資料，key表示工作表名，value表示對應工作表的 sheet 資料，支援匯出多個工作表
        fileName: '我的excel',// 匯出檔名
        type: 'xlsx' // 檔案匯出型別
    });
}

三、參考資料

• vue-json-excel外掛文件
• sheetjs-xlsx工具庫
• xlsx-style工具庫

總結

到此這篇關於Vue前端匯出Excel檔案的文章就介紹到這了,更多相關Vue匯出Excel檔案內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！