zoukankan      html  css  js  c++  java
  • 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>
    
  • 相关阅读:
    进程与线程的区别
    信号列表详解
    同步与互斥
    互斥锁
    读写锁
    Redis QPS测试
    从分布式锁来看redis和zookpeer!
    JVM虚拟机调参
    log4j.properties配置详解与实例
    生产者消费者(消费者要消费完才能退出)
  • 原文地址:https://www.cnblogs.com/Grani/p/13377163.html
Copyright © 2011-2022 走看看