vue使用printjs打印el-table
npm install print-js --save
import printJS from 'print-js'
1.打印样式丢失肿么办???(写行内样式)-----2.el-table样式缺失(在@media print修改或补充)
<div id="main">
<div style="margin: 14px 0; font-size: 18px">
<span style="margin-right: 10px">【编号】</span
</div>
<el-table
:data="tablePrintData"
border
style="width: 100%; margin-top: 8px"
>
<el-table-column
v-for="(item, index) in tableHeadOfPrint"
:label="item.ITEM_NAME"
:key="index"
>
<template slot-scope="scope">
<span
style="display: inline-block; height: 100%"
:class="
scope.row[item.NAME] < item.REFERENCE_LOWER ||
scope.row[item.NAME] > item.REFERENCE_UPPER
? 'redColor'
: ''
"
>{{ scope.row[item.NAME] }}</span
>
</template>
</el-table-column>
</el-table>
</div>
方法1
print() {
const style = '@page { } ' + '@media print {td{border:1px solid #000;text-align:center;height:40px}th{border:1px solid #000} }';//这里修改的是el-table边框问题
printJS({
printable: 'main', //打印区域id
type: 'html', //打印类型是html
scanStyles: false,
style: style,
targetStyles: ['*'],
})
},
方法2—针对答应el-table内容过多列显示不完全
const printContent = this.$refs.printId;
const width = printContent.clientWidth;
const height = printContent.clientHeight;
const canvas = document.createElement('canvas');
const scale = 4; // 定义任意放大倍数,支持小数;越大,图片清晰度越高,生成图片越慢。
canvas.width = width * scale;
canvas.height = height * scale;
canvas.style.width = width * scale + 'px';
canvas.style.height = height * scale + 'px';
canvas.getContext('2d').scale(scale, scale);
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
html2canvas(printContent, {
canvas,
backgroundColor: null,
useCORS: true,
windowHeight: document.body.scrollHeight,
scrollX: -scrollLeft, // 解决水平偏移问题,防止打印的内容不全
scrollY: -scrollTop
}).then((canvas) => {
const url = canvas.toDataURL('image/png')
printJS({
printable: url,
type: 'image',
documentTitle: '', // 标题
style: '@page{size:auto;margin: 0.5cm 1cm 0cm 1cm;}' // 去除页眉页脚
})
}).catch(err => {
console.error(err);
})