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

Question

I want to convert HTML contents to a pdf file and store it to the server so, I used jspdf - html2pdf function for convert HTML contents to pdf file.

所以我正在像这样的 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() 

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

Answer 1

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

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

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();