Vue Element 下载 Excel 文件

测试可行

引入工具库

npm install -S file-saver xlsx

引入

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

template

<el-table
          
           <!-- 隐藏表格 -->
          v-show="false"
		  <!-- 表格数据 -->
          :data="tableDataAll"
		 <!-- id -->
          id="exportTab"
          border>
    <el-table-column prop="QK" label="区块"/>
    <el-table-column prop="JH" label="井号"/>
    <el-table-column prop="QYRQ" label="取样日期"/>
    <el-table-column prop="MD" label="密度"/>
    <el-table-column prop="PH" label="PH值"/>
    <el-table-column prop="CL_Z" label="氯离子"/>
    <el-table-column prop="BR_Z" label="溴离子"/>
    <el-table-column prop="I_Z" label="碘离子"/>
    <el-table-column prop="ZKHD" label="总矿化度"/>
    <el-table-column prop="NABCL" label="钠比氯"/>
</el-table>

methods

//导出 Excel 方法
exportExcel() {
    // loading
    const loading = this.$loading({
        lock: true,
        text: '请稍等，正在导出',
        spinner: 'el-icon-loading',
        background: 'rgba(102, 104, 104)'
    });
    //传入 文件名 和 id
    exportExcelFile('文件名', "#exportTab");
    loading.close();
},

//导出方法
exportExcelFile(fileName, id) {
    // 导出的内容只做解析，不进行格式转换
    let xlsxParam = {raw: true} 
    let wb = XLSX.utils.table_to_book(document.querySelector(id), xlsxParam)
    let wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'})
    try {
        FileSaver.saveAs(new Blob([wbout], {type: 'application/octet-stream'}), fileName + '_' + getDate() + '.xlsx')
    } catch (e) {
        if (typeof console !== 'undefined') {
            console.log(e, wbout)
        }
    }
    return wbout
},

//生成日期
function getDate() {
    let date = new Date();
    //年
    let year = date.getFullYear();
    //月
    let month = date.getMonth() + 1;
    //日
    let day = date.getDate();
    //时
    let hour = date.getHours();
    //分
    let min = date.getMinutes();
    //秒
    let sec = date.getSeconds();
    return year + "年" + month + "月" + day + "日   " + hour + ":" + min + ":" + sec;
}