Vue中导出表格插件，简单实用

安装插件

npm install --save xlsx

在项目中使用插件

<template>
    <div @click="exportExcel">开始导出</div>
</template>

<script>
import XLSX from 'xlsx'
export default {
    methods: {
        /* 点击导出表格事件 */
        exportExcel(){
            /* 假设这是后端返回的数据 */
            let data = [{ itemId: 111, title: "ces", link: "aaaa" }, ....]
            /* 将数据重新格式化下 */
            let newData = this.filterXlsx(data)
            console.log(newData)
            /* 新建空workbook，然后加入worksheet */
            let ws = XLSX.utils.json_to_sheet(data)
            // 设置每列的宽度, 第几个对象代表第几列
            ws['!cols'] = [
                { 'wch': 15 },
                { 'wch': 50 }
            ]
            /* 新建book */
            let wb = XLSX.utils.book_new()
            /* 生成xlsx文件(book,sheet数据,sheet命名) */
            XLSX.utils.book_append_sheet(wb, ws, '商品监控页汇总数据导出')
            /* 写文件(book,xlsx文件名称) */
            XLSX.writeFile(wb, '商品监控页汇总数据表.xlsx')
        }

        /* 导出表格的数据 */
        filterXlsx(data) {
            let xlsxData = []
            data.forEach(item => {
                xlsxData.push({
                    商品ID: item.itemId,
                    商品名称: item.title,
                    商品链接: item.link,
                })
            })
            return xlsxData
        },
    }
}
</script>