Vue项目中将table组件导出Excel表格以及打印页面内容

体验更优排版请移步原文：http://blog.kwin.wang/programming/vue-table-export-excel-and-print.html

页面中显示的table表格，经常会要求实现导出Excel的需求，项目中刚好遇到，实现起来也比较简单，记录一下。

1.这里主要需要两个依赖：xlsx、file-saver：

 npm install xlsx --save

 npm install file-saver --save

2.组件中引入

import FileSaver from 'file-saver'

import XLSX from 'xlsx'

3.组件中导出Excel的方法

//导出Excel

exportToExcel () {

    let et = XLSX.utils.table_to_book(document.getElementById('table-content')); //此处传入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;

}

4.导出按钮执行exportToExcel方法即可

<el-button @click="exportToExcel">导出</el-button>

---

5.打印页面部分内容的实现方法

//打印页面内容

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;

}

方法的实现很容易理解，打印的体验也比较好，妙！

End…