java pdf 不分页 不分页的pdf

不分页代码，解决分页导致表或图显示不全

handleDownloadPDF = () => {
    const { startTime, endTime, type } = this.state;
    document.body.style.overflow = 'hidden'
    document.getElementById('reportBox').style.backgroundColor = '#FFFFFF';
    setTimeout(() => {
      const element = document.getElementById('reportBox'); // 这个dom元素是要导出pdf的div容器
      var width = element.offsetWidth; //dom宽
      var height = element.offsetHeight; //dom高
      var scale = 2; //放大倍数
      var opts = {
        dpi: window.devicePixelRatio * 2,
        scale: scale,
        width: width,
        height: height,
        useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
      };

      html2canvas(element, opts).then((canvas) => {
        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);
        pdf.save(`江苏省大数据管理中心数据质量${type === 0 ? '周报' : type === 1 ? '月报' : type === 2 ? '年报' : '报告'}(${startTime}~${endTime}).pdf`);
        element.style.backgroundColor = 'transparent';
        document.body.style.overflow = 'visible';

      });
    }, 3000)
  };

下载pdf分页代码

handleDownloadPDF = () => {
    const { startTime, endTime, type } = this.state;
    document.body.style.overflow = 'hidden'
    document.getElementById('reportBox').style.backgroundColor = '#FFFFFF';
    setTimeout(() => {
      const element = document.getElementById('reportBox'); // 这个dom元素是要导出pdf的div容器
      const w = element.offsetWidth; // 获得该容器的宽
      const h = element.offsetWidth; // 获得该容器的高
      const { offsetTop } = element; // 获得该容器到文档顶部的距离
      const { offsetLeft } = element; // 获得该容器到文档最左的距离
      const canvas = document.createElement('canvas');
      let abs = 0;
      const win_i = document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条）
      const win_o = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）
      if (win_o > win_i) {
        abs = (win_o - win_i) / 2; // 获得滚动条长度的一半
      }
      canvas.width = w * 2; // 将画布宽&&高放大两倍
      canvas.height = h * 2;
      const context = canvas.getContext('2d');
      context.scale(2, 2);
      context.translate(-offsetLeft - abs, -offsetTop);
      // 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
      // translate的时候，要把这个差值去掉
      html2canvas(element, {
        allowTaint: true,
        scale: 2 // 提升画面质量，但是会增加文件大小
      }).then((canvas) => {
        const contentWidth = canvas.width;
        const contentHeight = canvas.height;
        // 一页pdf显示html页面生成的canvas高度;
        const pageHeight = contentWidth / 595.28 * 841.89;
        // 未生成pdf的html页面高度
        let leftHeight = contentHeight;
        // 页面偏移
        let position = 0;
        // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        const imgWidth = 595.28;
        const imgHeight = 595.28 / contentWidth * contentHeight;
        const pageData = canvas.toDataURL('image/jpeg', 1.0);
        const pdf = new jsPDF('', 'pt', 'a4');
        // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        // 当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
          pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
        } else { // 分页
          while (leftHeight > 0) {
            pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
            leftHeight -= pageHeight;
            position -= 841.89;
            // 避免添加空白页
            if (leftHeight > 0) {
              pdf.addPage();
            }
          }
        }
        pdf.save(`江苏省大数据管理中心数据质量${type === 0 ? '周报' : type === 1 ? '月报' : type === 2 ? '年报' : '报告'}(${startTime}~${endTime}).pdf`);
        element.style.backgroundColor = 'transparent';
        document.body.style.overflow = 'visible';
      });
    }, 3000)
  };

本人项目中的应用，只要传入id值，自定义生产pdf。

//此函数为本人项目中的应用，面对不同项目进行修改。
 handleDownloadPDF = () => {
    const pdf = new jsPDF('', 'pt', 'a4');
    let flag = false
    let page = 1
    document.body.style.overflow = 'hidden'
    document.getElementById('reportBox').style.backgroundColor = '#FFFFFF';
    document.getElementById("mapEcharts").style.marginTop = "500px";
    document.getElementById("getScore").style.marginTop = "150px";
    this.DownPDF(document.getElementById('top1'), flag, pdf,page)
    //由于echart2元素根据后台请求生成，所以做此判断，如果存在，即生成pdf。如果不存在则不生成pdf。
    if (document.getElementById("echart2") !== null) {
      document.getElementById("echart2").style.marginTop = "150px";
      this.DownPDF(document.getElementById('top2'), flag, pdf,page)
      document.getElementById("echart2").style.marginTop = "0";
    } else if (document.getElementById("echart2") === null) {
      this.DownPDF(document.getElementById('top2'), flag, pdf,page)
    }
    flag = true
    page = 2
    this.DownPDF(document.getElementById('top3'), flag, pdf,page)

    document.getElementById("mapEcharts").style.marginTop = "20px";
    document.getElementById("getScore").style.marginTop = "0";
  };


//封装下载pdf函数，传入多个节点元素进行拼接pdf。
  DownPDF = (element, flag, pdf, page) => {
    const { startTime, endTime, type } = this.state;
    const w = element.offsetWidth; // 获得该容器的宽
    const h = element.offsetWidth; // 获得该容器的高
    const { offsetTop } = element; // 获得该容器到文档顶部的距离
    const { offsetLeft } = element; // 获得该容器到文档最左的距离
    const canvas = document.createElement('canvas');
    let abs = 0;
    const win_i = document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条）
    const win_o = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）
    if (win_o > win_i) {
      abs = (win_o - win_i) / 2; // 获得滚动条长度的一半
    }
    canvas.width = w * 2; // 将画布宽&&高放大两倍
    canvas.height = h * 2;
    const context = canvas.getContext('2d');
    context.scale(2, 2);
    context.translate(-offsetLeft - abs, -offsetTop);
    // 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
    // translate的时候，要把这个差值去掉

    html2canvas(element, {
      allowTaint: true,
      scale: 2 // 提升画面质量，但是会增加文件大小
    }).then((canvas) => {
      const contentWidth = canvas.width;
      const contentHeight = canvas.height;
      // 一页pdf显示html页面生成的canvas高度;
      let pageHeight = contentWidth / 595.28 * 841.89;
      // 未生成pdf的html页面高度
      let leftHeight = contentHeight;
      // 页面偏移
      let position = 0;
      // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
      const imgWidth = 595.28;
      const imgHeight = 595.28 / contentWidth * contentHeight;
      const pageData = canvas.toDataURL('image/jpeg', 1.0);

      // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
      // 当内容未超过pdf一页显示的范围，无需分页
      if (document.getElementById("echart2") === null){
        pageHeight=3570
      }

      if (leftHeight < pageHeight) {
        pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
      } else { // 分页
        while (leftHeight > 0) {
          pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
          leftHeight -= pageHeight;
          position -= 841.89;
          // 避免添加空白页
          if (leftHeight > 0) {
            pdf.addPage();
          }
        }
          if (page===1) {
            pdf.addPage();
          }
        }
      if (flag) {
        pdf.save(`江苏省大数据管理中心数据质量${type === 0 ? '周报' : type === 1 ? '月报' : type === 2 ? '年报' : '报告'}(${startTime}~${endTime}).pdf`);
        element.style.backgroundColor = 'transparent';
        document.body.style.overflow = 'visible';
      }
    });
  }