Vue Element 下载 Excel 文件

测试可行

引入工具库

npm install -S file-saver xlsx

引入

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

template

          v-show="false"
		  
          :data="tableDataAll"
		 
          id="exportTab"
          border>
    
    
    
    
    
    
    
    
    
    

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;
}