vue 导出excel

1.安装依赖
npm install --save xlsx file-saver

2.在放公共方法的js文件下引入
import FileSaver from 'file-saver'
import XLSX from 'xlsx'

vue 导出excel_第1张图片

3.在放公共方法的js文件下写

Vue.prototype.exportExcel = function(name){//导出excel
    let wb = XLSX.utils.table_to_book(document.querySelector('#out-table'));
    let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
    try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), name+'.xlsx')
    } catch (e) { 
        if (typeof console !== 'undefined') 
        console.log(e, wbout) 
    }
    return wbout
}

4.在导出按钮引入exportExcel方法

'el-icon-document' :size='tableConfig.size' @click="exportExcel('订单统计')">导出</el-button>

注意:
XLSX.utils.table_to_book(放入的是table的dom节点),name:传入的导出表格的名称
若表格内容使用fixed会打印出重复的数据,使用fixed的元素会另生成一个table结构。
vue 导出excel_第2张图片

vue 导出excel_第3张图片

你可能感兴趣的:(vue)