vue 打印，html2canvas+iframe打印

最新推荐文章于 2024-09-11 21:31:29 发布

一个程序猿cc

最新推荐文章于 2024-09-11 21:31:29 发布

阅读量157

点赞数

文章标签： vue.js javascript 前端

原文链接：https://blog.csdn.net/tzz_1122/article/details/133744783

版权

print(){            
            const iframeEL=document.querySelector('.print-iframe');
            if(iframeEL){
              iframeEL.remove();
            }
            // 获取要转换为图片的 DOM 元素
            const element = document.querySelector('.safety-inspect-form');
     
            // 将 DOM 元素转换为 Canvas 对象
            html2canvas(element).then(canvas => {
              // 创建一个新的图片元素，并将 Canvas 对象作为背景图
              const img = new Image();
              img.src = canvas.toDataURL('image/png');
              img.style.width='100%'
              img.setAttribute("crossOrigin", "anonymous");
              // 在 iframe 文档中添加图片元素
              const iframe = document.createElement('iframe');
              iframe.style.display = 'none';
              iframe.style.width='100%'
              iframe.classList.add('print-iframe')
              document.body.appendChild(iframe)
              const doc = iframe.contentWindow.document
              doc.body.appendChild(img);
              //避免图片没有加载完成就打印
              setTimeout(()=>{
                iframe.contentWindow.print();
                document.body.removeChild(iframe);
              },50)    
            })
        }

若打印页面包含第三方图片,html2canvas转图片时会不显示，我的处理方式是将第三方图片转为base64显示。

getBase64(url, callback) {
            var Img = new Image(),
            dataURL = '';
            Img.src = url +"?v=" + Math.random();
            Img.setAttribute("crossOrigin", 'Anonymous') 
            Img.onload = function () { 
                var canvas = document.createElement("canvas"), 
                width = Img.width, 
                height = Img.height;
                canvas.width = width;
                canvas.height = height;
                canvas.getContext("2d").drawImage(Img, 0, 0, width, height); 
                dataURL = canvas.toDataURL('image/jpeg'); 
                callback ? callback(dataURL) : null; 
            };
        },

html2canvas：优点不会丢失页面样式。