html2canvas icon indicating copy to clipboard operation
html2canvas copied to clipboard

我在vue中先生成图片再打印比较模糊

Open swit1983 opened this issue 7 years ago • 0 comments

主要是为了解决在vue中打印某个dom的问题,我先生成图片在使用默认配置比较模糊,使用网上高清的方法以后,打印预览都乱了,整幅大,但是内容反而缩小了。不知道打印机读的是读的哪个长宽? 用到了printJS

goPrint(){

            var cntElem = this.$refs.printContent;

            var shareContent = cntElem;//需要截图的包裹的(原生的)DOM 对象
            var width = shareContent.offsetWidth; //获取dom 宽度
            var height = shareContent.offsetHeight; //获取dom 高度
            var canvas = document.createElement("canvas"); //创建一个canvas节点
            var scale = 2; //定义任意放大倍数 支持小数
            canvas.width = width * scale; //定义canvas 宽度 * 缩放
            canvas.height = height * scale; //定义canvas高度 *缩放
            canvas.getContext("2d").scale(scale, scale); //获取context,设置scale 
            var opts = {
                canvas: canvas, //自定义 canvas
                width: width, //dom 原始宽度
                height: height
            };

            html2canvas(shareContent, opts).then(function (canvas) {

                var context = canvas.getContext('2d');
                // 【重要】关闭抗锯齿
                context.mozImageSmoothingEnabled = false;
                context.webkitImageSmoothingEnabled = false;
                context.msImageSmoothingEnabled = false;
                context.imageSmoothingEnabled = false;
                printJs(canvas.toDataURL("image/png"), 'image');
                document.body.appendChild(canvas);
                

            });

        }

swit1983 avatar Nov 03 '17 07:11 swit1983