Vue 实现 xlsx 导出工具封装

安装组件

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",
		}]
	},
}
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页