版权声明:任先阳 任 先 阳 任先 先阳,nvcc.cc、www.nvcc.cc、sbfox.com、www.sbfox.com https://blog.csdn.net/qq_39571197/article/details/83145421
事实上我发现高度不用处理
在一个烦躁的时刻,突然要实现一个打印功能,最后决定生成图片打印~
结果图片果然不清晰(放心早知道有这个坑了~),
说了比较烦躁,网上教程也静不下来心看,依稀看到说生成canvas时,进行放大,
然后就放大scale倍呗,恩,然后就成了。。。
理论上清晰度、生成时长与scale成正比·
事后,看了看这篇文章,https://segmentfault.com/a/1190000011478657
扫描二维码关注公众号,回复:
3965580 查看本文章
与大多数教程一样,不知为什么要创建canvas,给html2canvas使用,也许有隐藏彩蛋,这得我看了文档之后才能知道。
理论上这个有用,我也复制到自己的代码里了~
在新窗口打印,并删除iframe,因为print是个同步操作,所以关闭print面板之后才能看到iframe节点被删除
methods: {
print() {
const dom = this.$refs['order'];
const scale = 3;
html2canvas(this.$refs['order'], {
scale,
width: dom.offsetWidth * scale,
height: dom.offsetHeight * scale,
}).then(canvas => {
const context = canvas.getContext('2d');
// 【重要】关闭抗锯齿 https://segmentfault.com/a/1190000011478657
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
//处理canvas,例如加水印
//完成canvas
const src64 = canvas.toDataURL();
this.print2(src64, canvas, scale);
});
},
print2(src64, canvas, scale) {
const iframe = document.createElement('iframe');
iframe.id = 'order' + this.order.id;
document.body.appendChild(iframe);
iframe.contentWindow.document.write(`
<style>html{width: 180px;}<\/style>
<script>
const oid = ${this.order.id};
function main(){
window.print();
window.parent.window.document.body.removeChild(window.parent.window.document.getElementById('order' + oid));
}
<\/script>
<img src="${src64}" width="${canvas.width / scale}" onload="main()" \/>`);
},