前端将table导出表格,及打印

1,659 阅读1分钟

安装两个依赖 xlsx file-saver 

 npm install xlsx --save  
 npm install file-saver --save


组件中引用

    import FileSaver from 'file-saver'
    import XLSX from 'xlsx'
    注: 在组件中引用

组件

//导出Excel
exportToExcel () {
    let et = XLSX.utils.table_to_book(document.getElementById('table')); //此处传入table的DOM节点
    let etout = XLSX.write(et, { 
        bookType: 'xlsx', 
        bookSST: true, 
        type: 'array' 
    });
    try {
        FileSaver.saveAs(new Blob([etout], { 
            type: 'application/octet-stream' 
        }), 'trade-publish.xlsx');   //trade-publish.xlsx 为导出的文件名
    } catch (e) {
        console.log(e, etout) ;
    }
    return etout;
}
<el-button @click="exportToExcel">导出</el-button>

打印

//打印页面内容
printContent(){
    let wpt = document.getElementById('table-content');
    let newContent = wpt.innerHTML;
    let oldContent = document.body.innerHTML;
    
    document.body.innerHTML = newContent;
    window.print(); //打印方法
    window.localtion.reload();
    document.body.innerHTML = oldContent;
}