WechatIMG11363.png
export function printExcel(id) {
// 空页面
let printStr = "<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'></head>";
// 定义element-ui table组件的样式
// box-sizing:border-box;
//display:table-cell!important;
const tabStyle =
`<style>
table{width:100%;}
.el-table__body-wrapper{ max-height:none !important;box-sizing:border-box;}
.el-table{ max-height:none !important;}
.el-table__header,.el-table__body,.el-table__footer{ table-layout:fixed!important; width:100%!important;border-collapse: collapse;text-align:center;}
table,table tr th, table tr td {border:1px solid #ddd;color:#606266;word-wrap:break-word;}
table tr th,table tr td{ padding:4mm 0mm;word-wrap:break-word; }
.el-table__body, tr td .cell{width:100%!important;}
.el-table th.gutter{display: none;}
.el-table colgroup.gutter{display: none;}
.el-table__header{ border-collapse: inherit;}
@media print{
table{page-break-after: auto;}
tr{page-break-inside: avoid; page-break-after: auto;}
td{page-break-inside: avoid; page-break-after: auto;}
thead{display: table-header-group;}
tfoot{display: table-footer-group;}
}
// --------------------隐藏table gutter列和内容区右侧的空白 start
.el-table th.gutter{
display: none;
width:0
}
.el-table colgroup col[name='gutter']{
display: none;
width: 0;
}
.el-table__body{
width: 100% !important;
}
</style>`;
let content = "";
// 获取名为传入id的 dom元素内的内容
let str = document.getElementById(id).innerHTML;
// 拼接空页面+style样式+dom内容
content = content + str;
printStr = printStr + '<body><div id="ceshi" style="height:atuo;">' + content + "</div></body>" + tabStyle + "</html>";
// 打开新页面
let pwin = window.open("_blank");
// 将内容赋值到新页面
pwin.document.write(printStr);
// document.getElementsByTagName('body')[0].style.zoom = 0.75
pwin.document.close();
// 聚焦-不加focuse，在某些情况下，打印页面会有问题。
pwin.focus();
// 使用setTimeout，等页面dom元素渲染完成后再打印。
setTimeout(() => {
pwin.print(); // 打印功能。 例如 window.print() 直接打印当前整个页面。
// document.getElementsByTagName('body')[0].style.zoom = 1;
pwin.close(); // 关闭 打印创建的当前页面
}, 500);
}
<!-- 打印表格区域 -->
<div style="display: none">
<div id="printArea">
<el-table
stripe
border
:max-height="tableHeight"
:data="list"
ref="tableBox"
>
<el-table-column
align="center"
v-for="(th, keys) in columns"
:key="keys"
:prop="th.prop"
v-if="th.visible"
:label="th.label"
:width="200"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<div>
<span>{{ scope.row[th.prop] }}</span>
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
mounted() {
this.$nextTick(() => {
let thead = this.$refs.tableBox.$el.querySelector(
".el-table__header-wrapper thead"
);
//追加到el-table的内容里去
this.$refs.tableBox.$el
.querySelector(".el-table__body-wrapper table")
.appendChild(thead);
});
}
// css
/* 隐藏咱们dom操作添加的节点，不影响el-table原功能 */
.el-table .el-table__body-wrapper table thead {
display: none;
}
.el-table__footer-wrapper {
display: none !important;
}
/* 在打印的时候隐藏el-table的表头，开放咱们dom操作添加的节点 */
@media print {
.el-table {
max-height: auto !important;
}
.el-table .el-table__header-wrapper {
display: none;
}
.el-table .el-table__body-wrapper table thead {
display: table-header-group;
}
}
网友评论