前端导出pdf以及导出内容截断的解决办法

最新推荐文章于 2024-08-20 14:01:33 发布

Teacher_du

最新推荐文章于 2024-08-20 14:01:33 发布

阅读量1w

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/Teacher_du/article/details/95942594

版权

本文介绍了前端在导出PDF时遇到内容截断的问题，提出了解决方案。首先，为确保完整导出，需要在导出前将页面滚动到顶部。其次，通过调整PDF创建时的高度，使之与内容的canvas相同，从而避免因分页导致的内容截断问题。

摘要由CSDN通过智能技术生成

1.有截断的pdf导出

//导出pdf
pdfExport() {
        // let top = document.getElementById('main');
        // if (top != null) {
        //   top.scrollIntoView();
        //   top = null;
        // }
        const that = this;
        var mainRight = document.getElementById('mainRight');
        html2canvas(mainRight).then(function(canvas) {
          var pdf = new jsPDF('p', 'pt', 'a4');
          const pageData = canvas.toDataURL('image/png');
      var contentWidth = canvas.width;
      var contentHeight = canvas.height;
      var pageHeight = contentWidth / 592.28 * 841.89;
      var leftHeight = contentHeight;
      var position = 0;
      var imgWidth = 595.28;
      var imgHeight = 592.28 / contentWidth * contentHeight;
      if (leftHeight < pageHeight) {
        pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);

  } else {
    while (leftHeight