import domtoimage from 'dom-to-image'
import html2canvas from 'html2canvas';
import printJS from 'print-js'
//打印
printDetail () {
let pjs = printJS({
printable: 'test2d', //打印区域
type: 'image', //打印类型html,还可以是json,image,pdf等,详细写法见官网
targetStyles: ['*'], //css样式,写成*代表打印样式完全继承你页面的样式
maxWidth: '800px' //打印界面最大宽度,适当调整可以解决打印页面过宽,显示不完整的问题
})
console.log(pjs, 'pjs')
},
// 截图方法一
printOut (name) {
html2canvas(document.querySelector("#test2d"), {
useCORS: true,
}).then(function (canvas) {
let pageData = canvas.toDataURL("image/jpeg", 1.0);
let link = document.createElement('a');
link.download = 'html2canvas.jpeg';
link.href = pageData;
link.click();
});
},
// 截图方法二
exportImage: (name) => {
let node = document.getElementById(name)
//let domtoimage = require('dom-to-image')
domtoimage.toJpeg(node, { quality: 1.0 })
.then(function (dataUrl) {
let link = document.createElement('a');
link.download = '全图导出.jpeg';
link.href = dataUrl;
link.click();
});
}
截图与打印
本文介绍了如何使用dom-to-image和html2canvas库进行网页截图,并结合print-js库实现打印功能,提供了两种截图方法和设置打印选项,如CORS和打印界面宽度控制。
摘要由CSDN通过智能技术生成