jsPDF如何将指定ID的HTML插入PDF指定页面并添加独立封面页

核心思路是将「单个DOM转成canvas图像」的逻辑封装为可复用的异步函数，按照你需要的页面顺序依次调用，分别插入到PDF的对应位置即可。

步骤1：封装公共转换工具函数 #

先把DOM转图片的逻辑抽成通用方法，避免重复写配置：

// 公共工具函数：将指定DOM转换为png格式的base64图像
async function domToPngImage(domId, options = {}) {
  const defaultOptions = {
    allowTaint: true,
    useCORS: false,
    scale: 2, // 建议调大scale参数，提升生成PDF的清晰度
    ...options
  }
  const canvas = await html2canvas(document.getElementById(domId), defaultOptions)
  return canvas.toDataURL("image/png")
}

步骤2：重写PDF生成逻辑 #

按页面顺序先处理封面，再处理正文等其他内容：

async function genPDF() {
  // 初始化PDF实例，明确单位为毫米、A4尺寸，避免环境差异导致尺寸错乱
  const doc = new jsPDF('p', 'mm', 'a4')
  const A4_WIDTH = 210
  const A4_HEIGHT = 297
  const PAGE_MARGIN = 10 // 统一页边距，可自行调整

  // ========== 第一页：插入封面 ==========
  const coverImg = await domToPngImage('mycoverpageId')
  // 封面可设置为全屏无边距，也可自定义边距，按需调整即可
  doc.addImage(coverImg, 'PNG', 0, 0, A4_WIDTH, A4_HEIGHT)

  // ========== 第二页起：插入正文内容 ==========
  doc.addPage() // 新增空白页放正文
  const contentImg = await domToPngImage('myid')
  // 计算正文图片按A4宽度缩放后的实际高度
  const contentImgHeight = (contentImg.naturalHeight * A4_WIDTH) / contentImg.naturalWidth
  let heightLeft = contentImgHeight
  let position = PAGE_MARGIN

  // 插入第一页正文
  doc.addImage(contentImg, 'PNG', PAGE_MARGIN, position, A4_WIDTH - PAGE_MARGIN * 2, contentImgHeight)
  heightLeft -= (A4_HEIGHT - PAGE_MARGIN * 2)

  // 正文跨页逻辑
  while (heightLeft >= 0) {
    position = position - (A4_HEIGHT - PAGE_MARGIN * 2)
    doc.addPage()
    // 可给每个正文页加统一页眉，不需要直接删除该行即可
    doc.setFontSize(22)
    doc.text(20, 20, '这是页眉标题')
    doc.addImage(contentImg, 'PNG', PAGE_MARGIN, position, A4_WIDTH - PAGE_MARGIN * 2, contentImgHeight)
    heightLeft -= (A4_HEIGHT - PAGE_MARGIN * 2)
  }

  // 配置PDF属性并导出
  doc.setProperties({
    title: '自定义PDF文件'
  })
  doc.save('mypdf.pdf')
}

拓展说明 #

• 要是你需要插入更多不同DOM对应到不同页面，只要按你想要的顺序，先调用addPage新增页面，再调用domToPngImage拿到对应DOM的图像，插入到新页面即可
• 不同DOM的转换配置、插入的边距、缩放比例都可以单独设置，不需要和其他部分保持一致
• 如果某段内容确定不会超过单页高度，可以直接插入，不需要走分页循环逻辑

内容的提问来源于stack exchange，提问作者deszok