Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

pdf generation - Angular 8 Generating HTML to PDF error using jsPDF

I am using angular 8

I am trying pdf generator but I am facing an issue

My Html part is


<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>

My Ts part is


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";
  }



My error is

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)

I tries a lot but I am facing this issue. pdf viewer is working fine but facing error in pdf generator, I used by importing jspdf but still facing error

and also declared jspdf and also facing the same error I dot an error in this line below

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

Help me to solve this.... thankyou


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
等待大神答复

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...