1. Vue項(xiàng)目中將table組件導(dǎo)出Excel表格以及打印頁(yè)面內(nèi)容
1.這里主要需要兩個(gè)依賴：xlsx file-saver：
npm install xlsx --save
npm install file-saver --save
2.組件中引入
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
3.組件中導(dǎo)出Excel的方法
//導(dǎo)出Excel
exportToExcel () {
let et = XLSX.utils.table_to_book(document.getElementById('table-content')); //此處傳入table的DOM節(jié)點(diǎn)
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 為導(dǎo)出的文件名
} catch (e) {
console.log(e, etout) ;
}
return etout;
}
4.導(dǎo)出按鈕執(zhí)行exportToExcel方法即可
<el-button @click="exportToExcel">導(dǎo)出</el-button>
5.打印頁(yè)面部分內(nèi)容的實(shí)現(xiàn)方法
//打印頁(yè)面內(nèi)容
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;
}
