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

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

html2canvas 和浏览器打印

上一篇:dolphinscheduler集群搭建1.3.2版本【步骤详细,且有说明,配备安装包下载连接及配套软件安装链接】


下一篇:[LuoguP4208][JSOI2008]最小生成树计数(最小生成树+矩阵树定理)