如何使用 html2pdf - jspdf javascript 插件设置页眉和页脚？答案

【问题标题】：How to set header and footer using html2pdf - jspdf javascript plugin?如何使用 html2pdf - jspdf javascript 插件设置页眉和页脚？
【发布时间】：2021-04-04 11:03:22
【问题描述】：

我想将 HTML 内容转换为 pdf 文件并将其存储到服务器，所以我使用 jspdf - html2pdf 函数将 HTML 内容转换为 pdf 文件。

所以我正在尝试这样的 Angular 项目中的 javascript 代码，

var element = this.pdfTable.nativeElement
var opt = {
  margin:       0.5,
  filename:     'ct-scan.pdf',
  enableLinks:  false,
  pagebreak:    { mode: 'avoid-all' },
  image:        { type: 'jpeg', quality: 0.98 },
  html2canvas:  { scale: 2 },
  jsPDF:        { unit: 'in', format: 'a4', orientation: 'portrait' }
};

 html2pdf().from(element).set(opt).toPdf().get('pdf').then(function (pdf) {
 var totalPages = pdf.internal.getNumberOfPages(); 

 for (var 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()

它工作正常。但是结果中没有设置页眉和页脚。所以有人可以帮我解决这个问题吗？提前致谢。

【问题讨论】：

标签： javascript jspdf

【解决方案1】：

由于您的单位使用英寸 jsPDF: { unit: 'in' ... ，减去 100 的宽度和 30 的高度将变为负数。 pdf 可能不会显示文本。

解决方法：可以通过console.log打印当前的宽高；或者只是除以 2 使其居中，然后您可以将文本调整到您想要的位置。

var element =  this.pdfTable.nativeElement;
var opt = {
  margin:       0.5,
  filename:     'ct-scan.pdf',
  enableLinks:  false,
  pagebreak:    { mode: 'avoid-all' },
  image:        { type: 'jpeg', quality: 0.98 },
  html2canvas:  { scale: 2 },
  jsPDF:        { unit: 'in', format: 'a4', orientation: 'portrait' }
};

 html2pdf().from(element).set(opt).toPdf().get('pdf').then(function (pdf) {
 var totalPages = pdf.internal.getNumberOfPages(); 
 //print current pdf width & height to console
 console.log("getHeight:" + pdf.internal.pageSize.getHeight());
 console.log("getWidth:" + pdf.internal.pageSize.getWidth());
 for (var i = 1; i <= totalPages; i++) {
   pdf.setPage(i);
   pdf.setFontSize(10);
   pdf.setTextColor(150);
   //divided by 2 to go center
   pdf.text('Page ' + i + ' of ' + totalPages, pdf.internal.pageSize.getWidth()/2, 
   pdf.internal.pageSize.getHeight()/ 2);
 } 
 }).save();

【讨论】：