html2canvas+jsPDF-分页截取时文字被分割或者pdf模糊不清晰,解决方案。

如果不是有特别的需求,比如打印或者分页,还是建议能在一页显示pdf,这样就避免了文字被截断的风险。

不做分页的处理,

var copyDom = $("#letterright");//要保存的dom
        var width = copyDom[0].offsetWidth; //dom宽
        var height = copyDom[0].offsetHeight; //dom高
        var scale = 2; //放大倍数
        var opts = {
          dpi: window.devicePixelRatio * 2,
          scale: scale,
          width: width,
          height: height,
          useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
        };

html2canvas(copyDom[0], opts).then((canvas) => {
          debugger
          var contentWidth = canvas.width;
          var contentHeight = canvas.height;
          var pdfWidth = (contentWidth + 10) / 2 * 0.75;
          var pdfHeight = (contentHeight + 200) / 2 * 0.75; // 500为底部留白
          var imgWidth = pdfWidth;
          var imgHeight = (contentHeight / 2 * 0.75); //内容图片这里不需要留白的距离
          var pageData = canvas.toDataURL('image/jpeg', 1.0);
          var pdf = new jsPDF('', 'pt', [pdfWidth, pdfHeight]);
          pdf.addImage(pageData, 'jpeg', 0, 0, imgWidth, imgHeight);
          });
发布了2 篇原创文章 · 获赞 2 · 访问量 118
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览