html2canvas
html2canvas copied to clipboard
我在vue中先生成图片再打印比较模糊
主要是为了解决在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);
});
}