html 打印浏览器,html2canvas 和浏览器打印

vue-print-nb

html2canvas

handlePrint(el) {

let htmlDom = document.getElementById(el)

const loading = this.$loading({

lock: true,

customClass: ‘canvas-loading‘,

text: ‘正在处理...‘,

spinner: ‘el-icon-loading‘,

background: ‘rgba(0, 0, 0, 0.9)‘

});

window.scrollTo(0, 0)

html2canvas(htmlDom, {

allowTaint: false, //允许污染

taintTest: true, //在渲染前测试图片(没整明白有啥用)

useCORS: true, //使用跨域(当allowTaint为true时这段代码没什么用,下面解释)

background: "#1E233F",

}).then(canvas => {

this.printImgSrc = canvas.toDataURL(‘image/png‘, 1.0)

setTimeout(function () {

loading.close()

let div = document.getElementById(‘printImgContainer‘)

div.click()

}, 500);

})

},

// 打印

testPrint() {

this.downloadFlag = 1;

this.$global.print_page();

setTimeout(() => {

this.downloadFlag = 0;

}, 1000)

},

v-show="printImgSrc"

v-print="‘#printImgContainer‘"

id="printImgContainer"

@click="testPrint">

原文：https://www.cnblogs.com/Grani/p/13377163.html