VUE--Element-UI组件库Table表格导出Excel文件

一、前端下载表格

1.npm导入包

npm install --save xlsx file-saver

2.给el-table标签添加id

<el-table :data="tableData" border id="out-table" >

3.引用包

// 引入导出Excel表格依赖
import FileSaver from "file-saver";
import XLSX from "xlsx";

4.添加导出按钮

<button @click="exportExcel">点击导出</button>

5.导出方法

//定义导出Excel表格事件
exportExcel() {
        /* 从表生成工作簿对象 */
        let wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
        /* 获取二进制字符串作为输出 */
        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' }),
            //设置导出文件名称
            'sheetjs.xlsx'
            )
        } catch (e) {
            if (typeof console !== 'undefined') console.log(e, wbout)
        }
        return wbout
        }

转载：https://www.cnblogs.com/s313139232/p/12557556.html

二、下载后端传过来的表格

单链接下载方法

window.location.href = 下载链接

传参方式下载链接

<template>
	<el-button type="danger" icon="el-icon-download" size="mini" circle @click="checkDetail(scope.row.payFile)"></el-button>
</template>


<script>
	methods: {
    
    
      checkDetail(val) {
    
    
        if (val){
    
    
          window.location.href = val
        }
      }
    }
</script>