在pdf中添加标题 [英] Add header in pdf

问题描述

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

使用的库:

• 解决方案

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

  像这样使用它:

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

  如果要在每个其他页面中都包含标题，请在while()循环中也添加此行.

  I am making a simple pdf generation react application,

  Libraries used:

  • jspdf

  • html2canvas

  The following is the code that I have tried,

  index.js:

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

  So here on click over the export button, the pdf generation happens.

    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");
      });
    };
  

  The pdf generation works fine.

  I need to implement header for all the dynamically generated pages. I have tried adding like pdf.text("<header> Some header content </header>"), but it doesn't work.

  How to add header in all the pages while generating pdf?

  解决方案

  The pdf.text() function requires an additional x and y parameter: http://raw.githack.com/MrRio/jsPDF/master/docs/jsPDF.html#text

  use it like this:

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

  If you want to have the header in every additional page add this line in the while() loop as well.

  这篇关于在pdf中添加标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！