技術標籤：# VueVuexlsxexcel 匯出excel封裝

Vue 實現 xlsx 匯入工具封裝

• 安裝元件
• 元件封裝：exportExcel.vue
• • HTML
  • JS
• 使用
• • HTML
  • JS

安裝元件

npm install xlsx --save

元件封裝：exportExcel.vue

HTML

對上傳按鈕進行封裝

<template>
	<el-button type="primary" size="mini" @click="exportExcel">{{ btnName || "匯出" }}</
 
el-button>
</template>

JS

自定義引數數，更加靈活的對匯出內容進行控制

import Xlsx from 'xlsx'

export default {
    name: "ExportExcel",
    props: {
        // excel 檔名
        fileName: String,
        // excel 欄位名
        excelTitle: Array,
        // excel 欄位名對應欄位
        excelParam: Array,
        // excel 對應資料
 

        excelData: Array,
        // 從第N行開始
        beginRow: String,
        // 自定義按鈕名稱
        btnName: String
    },
methods: {
	exportExcel () {
            let headers = [
                this.excelTitle
            ]
            // 將資料轉化成 excel 所需的資料格式
            let data = this.formatJson(this.excelParam,
 
 this.excelData)
            let ws = Xlsx.utils.aoa_to_sheet(headers)
            Xlsx.utils.sheet_add_aoa(ws, data, { origin: this.beginRow || 'A2' })
            let wb = Xlsx.utils.book_new()
            Xlsx.utils.book_append_sheet(wb, ws, 'Sheet1')
            Xlsx.writeFile(wb, (this.fileName || 'export') + '.xlsx')
        },

        formatJson (filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => {
                // 個性化資料處理
                return v[j]
            }))
        }
    }
}

使用

HTML

<export-excel
	:excelTitle="excelTitle"
	:excelParam="excelParam"
	:excelData="excelDatas"
/>

JS

// 引入封裝的匯出元件
import ExportExcel from '@/components/excel/exportExcel'

// 元件註冊
export default {
	components: { ExportExcel },
	return {
		// 匯出 excel 引數標題
		excelTitle: [
			"主題（Subject）",
			"申請人（Request Onwer）",
		],
		// 匯出 excel 對應欄位
		excelParam: [		
			"subject",
			"creator",
		],
		
		// 需要匯出的資料
		excelDatas: [{
			"subject" : "標題1",
			"creator" : "建立人1",
		}, {
			"subject" : "標題2",
			"creator" : "建立人2",
		}]
	},
}