Vue 实现 xlsx 导出工具封装

深藏阁楼爱情的钟 2023-01-08 12:25 126阅读 0赞

### 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",
    		}]
    	},
    }