【问题标题】:Angular 8 Generating HTML to PDF error using jsPDFAngular 8使用jsPDF生成HTML到PDF错误
【发布时间】:2021-04-17 11:20:43
【问题描述】:

我正在使用角度 8

我正在尝试 pdf 生成器,但我遇到了问题

我的 Html 部分是


<div id="content" #content>
    <h1>The Title</h1>
    <p>{{name}}</p>
  
  
    <table >
      <tr>
        <th>food</th>
        <th>drinks</th>
        <th>snacks</th>
      </tr>
      <tr>
        <td>Biriyani</td>
        <td>Pepsi</td>
        <td>potato chips</td>
      </tr>
      
    </table>
  </div>
  <button (click)="print()">PDF</button>



  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

  <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <button (click)="print()">Export To PDF</button>


        <div class="pdf-container">
          <pdf-viewer [src]="src"
                      [original-size]="false"
          ></pdf-viewer>
        </div>



      </div>
    </div>
  </div>

我的 Ts 部分是


import { analyzeAndValidateNgModules } from '@angular/compiler';
import { Component, OnInit } from '@angular/core';
import { ViewChild, ElementRef } from '@angular/core';
//import {jsPDF} from 'jspdf';
declare var jsPDF: any;
@Component({
  selector: 'app-pdf-generator',
  templateUrl: './pdf-generator.component.html',
  styleUrls: ['./pdf-generator.component.css']
})
export class PdfGeneratorComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  name = 'Angular';

  @ViewChild('content', {static: false}) content: ElementRef;


  title = 'exports-pdf';
  @ViewChild('exports') exports: ElementRef;

  public print(): void {
    const doc = new jsPDF('p', 'pt', 'letter');

    const content = this.exports.nativeElement;

    const margins = {
      top: 80,
      bottom: 60,
      left: 40,
      width: 522
    };
    console.log(doc);
      doc.fromHTML(content.innerHTML, margins.left, margins.top, {}, function () {
      //  doc.output('export.pdf'); ** REMOVE **
        doc.save("export.pdf");
      }, margins);
  }

    
    src = "https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf";
  }



我的错误是

core.js:4197 ERROR ReferenceError: jsPDF is not defined
    at PdfGeneratorComponent.print (pdf-generator.component.ts:27)
    at PdfGeneratorComponent_Template_button_click_21_listener (pdf-generator.component.html:20)

我尝试了很多,但我面临这个问题。 pdf 查看器工作正常,但在 pdf 生成器中遇到错误, 我通过导入jspdf使用但仍然遇到错误

并且还声明了jspdf并且也面临同样的错误 我在下面的这一行中点了一个错误

const doc = new jsPDF('p', 'pt', 'letter');

帮我解决这个问题....谢谢

【问题讨论】:

    标签: angular pdf-generation angular8 npm-install jspdf


    【解决方案1】:

    使用如下所示的import语句:

        import jsPDF from 'jspdf'
    
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-09-02
      • 2014-11-19
      • 2018-09-20
      • 2015-07-05
      • 1970-01-01
      • 2018-07-28
      • 2018-05-19
      • 2014-12-15
      相关资源
      最近更新 更多