【问题标题】:How Add Header and footer on all PDF page In jsPDF with addHTML method如何在所有PDF页面上添加页眉和页脚在jsPDF中使用addHTML方法
【发布时间】:2018-04-16 09:39:49
【问题描述】:

我正在使用 jspdf 将 html 转换为 pdf。我正在使用 addHTML 方法将 html 页面转换为 pdf

  var htmlSource = $('#body')[0];

 function crate (){
   var pdf = new jsPDF('p','px');

  pdf.addHTML(
    htmlSource,10, 10, {pagesplit: true, margin: {top: 10, right: 10,bottom: 10, left: 10, useFor: 'page'}},
    function(dispose){
       pdf.save('datapdf.pdf');
    }
  );

}

我想在所有页面上添加页眉和页脚,或者为页眉和页脚留空白。但使用选项我只能在 pdf 的第一页上留下页眉空间。

【问题讨论】:

  • 我在你之前尝试了很多然后我得到了这个结果检查问题stackoverflow.com/questions/47435088/…
  • 你试过添加HTML header and footer tags吗?
  • @vahdet 是的,我是加法器
    test
    html 中的标签
  • @E-housmaMardini 我的代码在与 pdf 对话时工作正常,但我想在所有 pdf 页面上添加页眉和页脚
  • 你可以使用这个库来做tcpdf.org

标签: javascript html jspdf


【解决方案1】:

一种方法可能是在客户端浏览器中重新填充 html 页面呈现,以便完全按照您希望在 pdf 中打印的方式显示它(然后只需使用您刚刚在上面创建的函数),因此以组合的格式通过一系列垂直元素,如 h、p1、f、h、p2、f、h、p3、f 等(其中 h=header,p1 ... pn 是页面,f=footer)而不是包含只是 h, p1, p2, p3, ... , pn, f(现在这样)。

这意味着您可能可以访问 html 页面的源代码(因此它不仅仅是从互联网上获取的页面),因为如果它是外部资源,则页眉和页脚的尺寸可能会以编程方式构造为还填充与页面其他元素相关的空间(我认为这里的 flex / 垂直应用 / 或网格技术在呈现网页时)。

另一方面,如果要执行此方法,则内容拆分可能并不总是可能的(我在这里并没有考虑销毁表格或其他仅在使用滚动时可见的多页元素),但是渲染也可能会考虑页面的垂直显示(与桌面中的横向模式相反),以便重新绘制页面中的元素。这有时会使页脚和页眉可能更大,所以我不确定你为什么要通过这样做来花费最终打印页面的部分宝贵空间。 (解决方案可能是打开一个新窗口,从而以新格式重新呈现页面,甚至可能在现有页面之后,然后在关闭相应页面之前启动打印确认/或下载文件。)

另一种方法是更改​​函数,以便使用页面的虚拟渲染(不显示页面) - 通过对函数进行更改而不是在渲染本身中进行更改。

不过,第二种方法也存在一些挑战。最初,在声明变量 'var pdf' 时,它被创建为唯一的数据存储容器,然后为它分配构造函数( var pdf = new jsPDF('p','px'); )。但是,在下一步中,您将向其中添加 HTML 内容 (pdf.addHTML),它是单个元素,而不是多个实体。您应该更改函数以使其打印一个数组,您首先在其中根据所呈现页面的尺寸计算元素。

也许代码会变成这样:

var fullpage, onepage, headd, foott, edges, contentt, he, fo, c, pages;
fullpage = document.body.scrollHeight; // height of all html page (not just the visible content)
onepage = 1200; // height of each single page printed in pdf - in pixels
headd = document.getElementById("header");
he =  headd.offsetHeight;
foott = document.getElementById("footer"); 
fo = foott.offsetHeight;
edges = he + fo;
contentt = onepage - edges; // height of content of each page printed

pages = [0];  // start to work with first page which obviously is there
fullpage -= onepage; // remove height of first printed page (containg both header and footer)
    pdf.addHTML( // create first page of pdf file
    htmlSource, 10, 10, {pagesplit: true, margin: {top: 10, right:
      10, bottom: 10, left: 10, useFor: 'page'}},
    function(dispose){
       pdf.save('datapdf.pdf');
    });   // this is your code

var i = 0; // start the counter

 while(fullpage > 0) { // start adding header + footer to remaining pages
  fullpage += edges; // if there is still a page 2...n we add edges, etc.
  i++;
  pages[i] = content(onepage) { // here you must insert the code for harvesting the n-st page content from your source code
    return htmlSource;
  }
     function addPages(i) {
         var eachpdf = "datapdf" + i + ".pdf";
          // <= here goes again your code, with a small change
          // pagesplit: false - instead of true, in order to speed the process, and also
          // pdf.save(eachpdf); - instead of pdf.save('datapdf.pdf');              
     }
 }

您尝试实现的是创建一个系列 he, p1, fo, he, p2, fo, he, p3, fo 等(其中 he=header, p1 ... pn 是上面的页面/命名 datapdfi / 和 fo=footer) 而不是仅包含 h、p1、p2、p3、...、pn、f 的系列。

这意味着您必须构造一个包含单独 pdf 页面的数组,如上面代码中所述。

我还没有为您创建用于分隔每个页面内容的代码(可能返回 htmlSource),但这与您的页面呈现方式密切相关。

【讨论】:

    【解决方案2】:

    有一个建议的方法使用 HTML 的元素 &lt;header&gt;&lt;footer&gt; 来达到这个目的,例如:

    <footer>
        <div style='text-align:center;'>Page <span class="pageCounter"></span>/<span class="totalPages"></span></div>
    </footer>
    

    https://github.com/MrRio/jsPDF/pull/260

    【讨论】:

    • @sajeentharan 页眉和页脚标签已在 html 中,但未显示在所有页面上。
    【解决方案3】:

    如果有人还在寻找简短的解决方案,你可以试试这个,

    对于页脚作为页数,

    
    html2pdf().from(element).set(opt).toPdf().get('pdf').then(function (pdf) {
      var totalPages = pdf.internal.getNumberOfPages();
    
      for (i = 1; i <= totalPages; i++) {
        pdf.setPage(i);
        pdf.setFontSize(10);
        pdf.setTextColor(150);
        pdf.text('Page ' + i + ' of ' + totalPages, pdf.internal.pageSize.getWidth() - 100, pdf.internal.pageSize.getHeight() - 30);
      } 
    }).save();
    

    对于表头,可以写

    pdfObject.text("my header text", 10, 10)
    

    这将在每个页面位置 x=10, y=10 中将标题文本创建为 my header text

    【讨论】:

      【解决方案4】:
      let doc = new JsPDF('p', 'pt', 'a4')
          doc.html(componentRef.current, {
              callback: function (pdf) {
                  //pdf.setFontSize(10)
                  let totalPages = pdf.internal.pages.length-1
                  for (let i = 1; i <= totalPages; i++) {
                      pdf.setPage(i);
                      // pdf.setFontSize(10);
                      // pdf.setTextColor(150);
                      pdf.text('Page ' + i + ' of ' + totalPages, pdf.internal.pageSize.getWidth() - 100, pdf.internal.pageSize.getHeight() - 30);
                  }
                  pdf.save(
                      `delivery-${deliveryDate}.pdf`
                  )
              },
              margin: [10, 0, 55, 0],
              autoPaging: "text",
          })
      

      【讨论】:

      • 请在您的答案中添加文字说明。
      猜你喜欢
      • 1970-01-01
      • 2016-11-03
      • 1970-01-01
      • 2012-04-28
      • 2020-01-02
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多