html2canvas 和浏览器打印

标签：ima   div   taint   load   代码   lob   全局   win   down   

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)
            },

 <!-- 生成覆盖全局的大图用于打印 -->
        <div class="print-img-container"
             v-show="printImgSrc"
             v-print="‘#printImgContainer‘"
             id="printImgContainer"
             @click="testPrint">
            <img :src="printImgSrc" alt="">
        </div>

html2canvas 和浏览器打印

标签：ima   div   taint   load   代码   lob   全局   win   down   

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