There are many ways to achieve front-end printing capabilities
Method One: window.print ()
window.print () default to print the contents of the body
if you want to achieve local printing, it is necessary to re-assignment to the content body, finished printing and then subsequent executions content reduction go back.
//根据div标签ID拿到div中的局部内容
bdhtml=window.document.body.innerHTML;
var jubuData = document.getElementById("printcontent").innerHTML;
//把获取的 局部div内容赋给body标签, 相当于重置了 body里的内容
window.document.body.innerHTML= jubuData;
//调用打印功能
window.print();
window.document.body.innerHTML=bdhtml;//重新给页面内容赋值；
return false;
The above method has a drawback that also operate in the current, window.document.body content re-rendering, printing the refresh will affect the user experience.
Method 2: Using iframe, iframe.contentWindow.print ()
Print the original ecology () The difference is that after the abolition of the printed page allows you to keep the contents of the current page is accessed
using the iframe of print () method, local content will be printed release in an iframe, the disadvantage is the style you want to use content also need to generate JS, if you want to print a lot of content, it is inevitable not convenient
<iframe width='100%' height='200px' ref='iframe' style='display: none;' id='iframe'></iframe>
JS：
let doc = this.$refs.reconciliationWrapper.innerHTML
this.$refs.iframe.contentWindow.document.write('<html><head><style media="print">@page { margin: 0mm 10mm; }body{margin-top: 50px; text-align: center;}</style></head><body><div>'+ doc +'</div></body></html>')
this.$refs.iframe.contentWindow.print()
The style here is also a need to go in JS generated, if the style is very complex, so writing style is a big project, how to solve this problem? The content to be printed to generate a picture and then placed in an iframe.
Screenshot generated using the html2canvas
// 打印账单
printBill () {
this.printDisabled = true // 点击打印按钮禁止重复点击
setTimeout(_ => { // 按钮显示为禁止了再去执行截图功能
html2canvas(this.$refs.reconciliationWrapper, {
backgroundColor: null,
scale: 1.3
}).then((canvas) => {
let dataURL = canvas.toDataURL('image/png')
this.$refs.iframe.contentWindow.document.body.innerHTML = '' // 清空上一次打印的内容
this.$refs.iframe.contentWindow.document.write('<html><head><style media="print">@page { margin: 0mm 10mm; }body{margin-top: 50px; text-align: center;}</style></head><body><img src=' + dataURL + '></body></html>')
setTimeout(_ => {
this.$refs.iframe.contentWindow.print()
}, 0)
this.printDisabled = false
})
}, 100)
}
Img printed on the screenshot of an iframe, screenshot generally somewhat vague, the scale html2canvas adjustment parameter, zoom ratio, to be adjusted according to actual situation.
