Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
swit1983 opened this issue Nov 3, 2017 · 0 comments
Open

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

swit1983 opened this issue Nov 3, 2017 · 0 comments

Comments

@swit1983
Copy link

swit1983 commented Nov 3, 2017

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

            });

        }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant