如果el-table表格有跨行或跨列的,同样也支持
1.安装依赖:npm install --save xlsx file-saver 2.在放置需要导出功能的组件中引入 import FileSaver from 'file-saver' import * as XLSX from 'xlsx' 3.封装一个简单的导出组件 在src下components中创建ExportExcel.vue 将下面代码复制粘贴 <template> <el-button type="primary" :loading="downloadLoading" icon="el-icon-top-right" size="small" @click="exportExcel">导出</el-button> </template> <script> import FileSaver from 'file-saver' import XLSX from 'xlsx' export default { props: { id: { type: String, //table ID名称 default: 'table' }, name: { type: String, //导出需要的名字 default: 'Table' } }, data () { return { downloadLoading:false } }, components: {}, methods: { // 导出Excel表格 exportExcel () { this.downloadLoading = true var xlsxParam = { raw: true } //转换成excel时,使用原始的格式 /* 从表生成工作簿对象 */ var wb = XLSX.utils.table_to_book( document.querySelector('#' + this.id), xlsxParam ) /* 获取二进制字符串作为输出 */ var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' }) try { FileSaver.saveAs( //Blob 对象表示一个不可变、原始数据的类文件对象。 //Blob 表示的不一定是JavaScript原生格式的数据。 //File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。 //返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。 new Blob([wbout], { type: 'application/octet-stream' }), //设置导出文件名称 this.name + '.xlsx' ) } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) } this.downloadLoading = false return wbout } } } </script>
<template> <div> <!-- id绑定的是el-table的id名称 --> <!-- name是导出excel的表格名称 --> <exportExcel :id="'exportTab'" :name="'导出Table'"></exportExcel> <el-table :data="orderData" id="exportTab" :span-method="spanMethod" border> <el-table-column prop="id" label="ID" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="100"></el-table-column> <el-table-column prop="amount1" label="数值 1 (元)"></el-table-column> <el-table-column prop="amount2" label="数值 2 (元)"></el-table-column> </el-table> </div> </template> <script> import { getSpanMethod } from "@/utils/el-table-span-method"; import ExportExcel from "@/components/ExportExcel.vue"; export default { components: { ExportExcel, }, data() { return { orderData: [ { id: "1", name: "王小虎", amount1: "234", amount2: "165", }, { id: "1", name: "王小虎", amount1: "165", amount2: "165", }, { id: "2", name: "王小虎", amount1: "324", amount2: "165", }, { id: "2", name: "王小虎", amount1: "621", amount2: "165", }, { id: "2", name: "王小虎", amount1: "539", amount2: "165", }, { id: "3", name: "王小虎", amount1: "621", amount2: "165", }, { id: "3", name: "王小虎", amount1: "539", amount2: "165", }, ], }; }, computed: { spanMethod: { get() { return (this.spanMethod = getSpanMethod( this.orderData, ["id"], ["name", "amount2"] )); }, set(val) { return val; }, }, }, }; </script>