如何用html2canvas设置整页边距？解决HTML转PDF内容缺失问题

一、修复内容缺失的核心问题 #

你的代码里把fileHeight硬写死成了100mm，这直接导致canvas生成的图片被强行压缩到100mm高度，页眉和底部的costbox都被截断了。把这行改回自适应计算即可：

let fileHeight = (canvas.height * fileWidth) / canvas.width;

另外还要注意两个细节：

• 确认*ngIf="order"已经触发，也就是执行PDF转换时pdfOrder容器已经完全渲染（比如如果order数据是异步请求获取的，要等数据加载完成再执行转换，避免元素还未生成）
• 给html2canvas添加配置，确保能捕获到视口外的内容：

html2canvas(DATA, {
  scrollY: 0, // 避免滚动偏移导致内容漏拍
  useCORS: true, // 页面包含跨域图片时需要开启
  logging: false // 可选，关闭日志减少干扰
}).then((canvas) => {
  // 后续PDF生成代码不变
})

二、如何添加多个独立元素到PDF #

如果不想把所有内容塞进同一个容器，需要单独处理多个元素（比如页眉、表格、底部栏分别生成），可以按以下步骤操作：

1. 给每个要捕获的元素添加模板引用：

<app-client-info #header></app-client-info>
<table #productTable>...</table>
<div class="costbox" #footer>...</div>

2. 在TS中分别获取这些元素，逐个生成canvas后依次添加到PDF，同时计算每个元素的位置：

@ViewChild('header') header!: ElementRef;
@ViewChild('productTable') productTable!: ElementRef;
@ViewChild('footer') footer!: ElementRef;

confirmOrder(): void {
  const pdf = new jsPDF('p', 'mm', 'a4');
  const pageWidth = 208;
  let currentPosition = 0;

  // 处理页眉
  html2canvas(this.header.nativeElement, { scrollY: 0 }).then(canvas => {
    const imgWidth = pageWidth;
    const imgHeight = (canvas.height * imgWidth) / canvas.width;
    pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, currentPosition, imgWidth, imgHeight);
    currentPosition += imgHeight + 10; // 增加10mm间距

    // 处理表格
    return html2canvas(this.productTable.nativeElement, { scrollY: 0 });
  }).then(canvas => {
    const imgWidth = pageWidth;
    const imgHeight = (canvas.height * imgWidth) / canvas.width;
    pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, currentPosition, imgWidth, imgHeight);
    currentPosition += imgHeight + 10;

    // 处理底部栏
    return html2canvas(this.footer.nativeElement, { scrollY: 0 });
  }).then(canvas => {
    const imgWidth = pageWidth;
    const imgHeight = (canvas.height * imgWidth) / canvas.width;
    pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, currentPosition, imgWidth, imgHeight);
    
    pdf.save('test.pdf');
  }).catch(err => {
    console.error('PDF生成失败:', err);
  });

  // 原有业务逻辑不变
  this.salesproductService.submitOrderedItems(this.order);
  this.router.navigate(["/main"]);
}

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