Skip to content

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

@swit1983

Description

@swit1983

主要是为了解决在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);
                

            });

        }

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions