使用jsPDF将HTML转为PDF时出现TypeError错误求助

Hey, let's figure out why you're hitting this TypeError: Cannot read property 'name' of undefined when triggering the ExportToPdf method with jsPDF. This error points to an issue during jsPDF's HTML parsing process, so let's break down the possible causes and fixes step by step.

报错信息 #

ng:///AppModule/TemplateComponent.ngfactory.js:198 ERROR TypeError: Cannot read property 'name' of undefined 
at k (vendor.bundle.js:69421) 
at r (vendor.bundle.js:69421) 
at vendor.bundle.js:69421 
at i (vendor.bundle.js:69421) 
at v (vendor.bundle.js:69421) 
at x (vendor.bundle.js:69421) 
at Object.e.fromHTML (vendor.bundle.js:69421) 
at TemplateComponent.webpackJsonp../src/app/pages/County/template/template.component.ts.TemplateComponent.ExportToPdf (main.bundle.js:5082)

你的Component代码 #

import * as jsPDF from 'jspdf'; 

@Component({ 
  selector: 'app-template', 
  templateUrl: './template.component.html', 
  styleUrls: ['./template.component.scss'] 
}) 
export class TemplateComponent implements OnInit { 
  constructor() { } 

  ExportToPdf() { 
    let doc = new jsPDF(); 
    let specialElementHandlers = { 
      '#editor': function (element, renderer) { 
        return true; 
      } 
    }; 
    let content = this.content.nativeElement; 
    doc.fromHTML(content.innerHTML, 15, 15, { 
      'width': 190, 
      'elementHandlers': specialElementHandlers 
    }); 
    doc.save('report.pdf'); 
  } 

  ngOnInit() { 
    this.getLocalData(); 
  } 
}

可能的原因及修复方案 #

• this.content未正确初始化：
  I notice you're accessing this.content.nativeElement, but there's no @ViewChild decorator declared for it in your component. Without this, this.content will be undefined, passing invalid HTML content to jsPDF and causing the parsing error.

  Fix: Add the ViewChild decorator to your component, and mark the target container in your HTML template with #content:

  // 先导入必要的模块
  import { ElementRef, ViewChild } from '@angular/core';
  
  export class TemplateComponent implements OnInit {
    @ViewChild('content') content: ElementRef; // 添加这行
    // ... 其他代码保持不变
  }
  

  在你的模板中：

  <div #content>
    <!-- 这里放置你要导出为PDF的HTML内容 -->
  </div>
  

• HTML内容包含不兼容元素：
  jsPDF's fromHTML method has limited support for complex HTML elements like custom Angular components, unclosed tags, or certain form elements. These can cause jsPDF to fail when trying to read element properties like name.

  Fix:

  • Test with a simplified HTML structure first (e.g., plain text and basic <p>/<div> tags) to confirm if the error goes away.
  • Check for unclosed tags in your template and replace custom components with native HTML where possible.

• Outdated jsPDF version：
  This specific error has been reported in older versions of jsPDF. Upgrading to the latest stable release might resolve the bug.

  Fix: Run this command to update:

  npm install jspdf@latest --save
  

• Switch to the recommended html() method：
  The fromHTML method is deprecated in jsPDF. The official recommended approach is to use html() with html2canvas, which handles HTML rendering more reliably.

  Fix:
  First install html2canvas:

  npm install html2canvas --save
  

  Then modify your ExportToPdf method:

  import jsPDF from 'jspdf';
  import html2canvas from 'html2canvas';
  
  // ...
  
  ExportToPdf() {
    const contentElement = this.content.nativeElement;
    html2canvas(contentElement).then(canvas => {
      const imgData = canvas.toDataURL('image/png');
      const pdf = new jsPDF('p', 'mm', 'a4');
      const imgWidth = 210;
      const pageHeight = 297;
      const imgHeight = canvas.height * imgWidth / canvas.width;
      let heightLeft = imgHeight;
      let position = 0;
  
      pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
      heightLeft -= pageHeight;
  
      // 处理长内容分页
      while (heightLeft >= 0) {
        position = heightLeft - imgHeight;
        pdf.addPage();
        pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;
      }
  
      pdf.save('report.pdf');
    });
  }
  

内容的提问来源于stack exchange，提问作者rina