在pdf中添加标题答案

【问题标题】：Add header in pdf在pdf中添加标题
【发布时间】：2021-06-25 18:02:00
【问题描述】：

我正在制作一个简单的 pdf 生成 react 应用程序，

使用的库：

以下是我试过的代码，

index.js：

<div className="App">
  <button onClick={exportToPdf}>Export</button>
  <div id="toRender">
    .
    .
    .
     Some lengthy content
    .
    .
    .
   </div>
</div>

所以在这里点击导出按钮，就会生成 pdf。

  const exportToPdf = () => {
    let elem = document.getElementById("toRender");
    elem.scrollIntoView();
    h2c(elem).then((canvas) => {
      const img = canvas.toDataURL("image/png", 1);
      //console.log(`"data:image/png;base64,${img}"`)

      const pdf = new jsPDF("p", "mm");

      const imgWidth = pdf.internal.pageSize.getWidth();
      const pageHeight = pdf.internal.pageSize.getHeight();
      const imgHeight = (canvas.height * imgWidth) / canvas.width;
      let heightLeft = imgHeight;

      let position = 10;

      pdf.addImage(img, "PNG", 0, position, imgWidth, imgHeight, 100, 90);
      heightLeft -= pageHeight;

      // pdf.rect(5, 5, 200, 285).line(5, 45, 205, 45);
      // pdf.line(3, 35, imgWidth - 3, 35)

      while (heightLeft >= 0) {
        position = heightLeft - imgHeight;
        pdf.addPage();
        pdf.addImage(img, "PNG", 0, position, imgWidth, imgHeight);
        // pdf.rect(5, 5, 200, 285).line(5, 45, 205, 45);
        heightLeft -= pageHeight;
      }

      //pdf.addImage(img, 'PNG', 0, 0)
      pdf.save("export.pdf");
    });
  };

pdf 生成工作正常。

我需要为所有动态生成的页面实现标题。我试过添加pdf.text("<header> Some header content </header>")，但它不起作用。

生成pdf时如何在所有页面中添加页眉？

【问题讨论】：

可能文字在图片下方。您是在pdf.addPage() 之后还是pdf.addImage() 之后添加pdf.text 行
@dehart，在pdf.addPage() 之后..
那么您的图像可能会覆盖您的文本。注释掉addImage()以确保
试过但没有运气.. 你能帮我解决一下我上面的代码框吗？
我做到了，text() 函数只适用于 x 和 y 参数。我已经发布了答案。

标签： javascript html reactjs pdf jspdf

【解决方案1】：

pdf.text() 函数需要额外的x 和y 参数： http://raw.githack.com/MrRio/jsPDF/master/docs/jsPDF.html#text

像这样使用它：

pdf.text('Some header content', 10, 10);

如果您想在每个附加页面中添加页眉，请在 while() 循环中添加此行。

【讨论】：

【解决方案2】：

我最近在一个 Vue 项目中完成了这个功能。我还需要在所有页面的标题处添加一个徽标。有几种不同的方法可以做到这一点；

在我开始之前，这是我的解决方案，我如何将我的页面与其他页面分开，同时将页眉放在页眉上；

我设置了这些样式；

.pdf-page__pagebreak {
  page-break-after: always;
  clear: both;
}

我在需要拆分页面的任何地方都使用了pdf-page__pagebreak 元素。

<div v-if="section.pagebreak">
  <div class="pdf-page__pagebreak" />
  <Logo class="pdf-page__logo" />
</div>

Strike：我实现了这种方法，因为我在 HTML 中创建了 pdf 视图（而不是使用完全 JS 创建），因为我还需要在屏幕上向用户显示这些元素。如果您完全使用 javascript 创建 pdf，您还可以通过循环设置所有页面的标题来采用另一种方法。

这里有一些适合您的案例的最佳做法；

另一方面，我昨天找到了一些内容来添加标题，但这些内容对我不起作用。我还在下面分享了链接；它可能会有所帮助；

【讨论】：