在Angular 7/8/9/10版本中如何将表格导出转换为PDF文件

现有公开的jsPDF相关方案普遍存在两个明显局限：要么要求开发者手动逐行添加文本内容，在批量转换、复杂动态内容转换等场景完全无法落地；要么仅支持部分格式转换，无法完整还原原始内容的样式、布局。

你可以通过搭配html2canvas的方式解决上述问题，具体实现方案如下：

• 核心思路：用html2canvas完整捕获目标DOM节点的所有内容（包含文本、图片、样式、布局），不需要手动提取任何文本信息，再将捕获的内容传入jsPDF生成完整PDF文件
• 可直接使用的代码示例：

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

/**
 * 自动将指定DOM内容转换为完整PDF
 * @param {string} domSelector 要转换的DOM节点选择器
 * @param {string} fileName 导出的PDF文件名
 */
async function convertDomToPdf(domSelector, fileName = '导出文件.pdf') {
  const targetDom = document.querySelector(domSelector)
  // 捕获完整DOM内容，自动保留所有元素与样式
  const canvas = await html2canvas(targetDom, {
    scale: 2, // 调整导出清晰度，数值越高文件体积越大
    useCORS: true, // 兼容跨域图片资源
    logging: false // 关闭控制台日志输出
  })
  const imgContent = canvas.toDataURL('image/png', 1.0)
  const pdf = new jsPDF('p', 'px', [canvas.width, canvas.height])
  pdf.addImage(imgContent, 'PNG', 0, 0, canvas.width, canvas.height)

  // 若需要处理长内容自动分页，可在此处添加分页逻辑：
  // 计算单页可容纳高度，内容超出高度时调用pdf.addPage()拆分内容绘制

  pdf.save(fileName)
}

• 方案适配说明：如果你需要生成可选中复制文本的PDF，可以将html2canvas替换为jsPDF官方推荐的html渲染模式，调用pdf.html()方法直接传入DOM节点，同样不需要手动添加文本行，只需调整对应配置参数即可。

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