html2canvas jsPDF react实现滚动页面的打印功能 高清

1.首先需要个库

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

2.封装

/ pdf导出
type ExportToPdfParams = {
  node: HTMLElement;
  title?: string;
  callback?: () => void;
};

export const exportToPdf = (params: ExportToPdfParams) => {
  const { node, title = '简历', callback } = params;
  //下载pdf方法
  node.style.overflow = 'visible';
  html2canvas(node, {
    allowTaint: true, //允许跨域
    height: node.scrollHeight, //
    width: node.scrollWidth, //为了使横向滚动条的内容全部展示，这里必须指定
    scale: 4,
    useCORS: true, //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
  }).then((canvas) => {
    console.log(canvas, 'canvas');
    let pdf = new jsPDF('p', 'mm', 'a4'); //A4纸，纵向
    let ctx = canvas.getContext('2d') as any,
      a4w = 190,
      a4h = 277, //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
      imgHeight = Math.floor((a4h * canvas.width) / a4w), //按A4显示比例换算一页图像的像素高度
      renderedHeight = 0;

    while (renderedHeight < canvas.height) {
      let page = document.createElement('canvas') as any;
      page.width = canvas.width;
      page.height = Math.min(imgHeight, canvas.height - renderedHeight); //可能内容不足一页
      //用getImageData剪裁指定区域，并画到前面创建的canvas对象中
      page
        .getContext('2d')
        .putImageData(
          ctx.getImageData(
            0,
            renderedHeight,
            canvas.width,
            Math.min(imgHeight, canvas.height - renderedHeight),
          ),
          0,
          0,
        );
      pdf.addImage(
        page.toDataURL('image/jpeg', 1.0),
        'JPEG',
        10,
        10,
        a4w,
        Math.min(a4h, (a4w * page.height) / page.width),
      ); //添加图像到页面，保留10mm边距
      renderedHeight += imgHeight;
      if (renderedHeight < canvas.height) pdf.addPage(); //如果后面还有内容，添加一个空页
    }
    pdf.save(title + '.pdf');
    callback?.();
  });
  node.style.overflow = 'auto';
};

3.使用

exportToPdf({
        node: exportResumeRef?.current?.resumeRef as any, //传入dom元素
        callback: () => {},
      }),

4.去除页脚样式

//直接在样式中加入
@page {
  margin-top: 0;
  margin-bottom: 0
}

原文链接