Wie man externe Javascript-Bibliothek in reactjs

Question

einbeziehen Ich würde gerne wissen, wie es möglich ist, eine externe Javascript-Bibliothek in ein reaktives Projekt aufzunehmen. Ich möchte zum Beispiel die jspdf-Bibliothek importieren: https://github.com/MrRio/jsPDF/blob/master/jspdf.js und sie in meiner reactjs-App verwenden.

Bisher habe ich versucht, wie dies erforderlich zu verwenden:

let React = require('react'); 
let { Spacing, Typography } = Styles; 
let DoughnutChart = require("react-chartjs").Doughnut; 
let Chart = require('react-google-charts').Chart; 
let { StylePropable, StyleResizable } = Mixins; 
let EditableDiv = require('../EditableDiv.jsx'); 
//some other library 
//the library that matter for me 
var pdfConverter = require('../utils/jspdf.source.js'); 

//then I have my classical react code which works and a function to generate ad pdf 
_generatePdf: function(){ 
    console.log('Genrating pdf'); 
    var doc = new pdfConverter.jsPDF('p','pt'); 
    var img = new Image(); 
} 

Ich habe folgende Fehlermeldung: Typeerror: pdfConverter.jsPDF ist keine Funktion.

Damit es funktioniert, habe ich etwas hässliches gemacht, ich kopiere die Quelle von jspdf-source.js in meine react.jsx Datei und rufe einfach jsPDF anstelle von pdfConverter.jsPDF auf. Es ist definitiv nicht der richtige Weg, aber kann die Bibliothek nicht importieren und verwenden.

Können Sie mir sagen, was ich falsch mache und wie ich das korrigieren kann? Danke

-EDIT-

Als ich meine hässliche Lösung wurde mit (Kopieren der Quelle in meiner Datei) musste ich nur Folgendes tun:

var doc = new jsPDF('p','pt); 

Und es funktionierte perfekt, erwarte, dass ich eine sehr große Datei hatte

Nach der vorgeschlagenen Lösung von @dannyjolie unten, habe ich Jspdf direkt aus dem Npm-Paket importiert, aber ich bin immer noch nicht in der Lage, die Bibliothek zu verwenden . Ich habe versucht, den folgenden Code weicht zu einem Fehler führen:

var pdfConverter = require('jspdf'); 
var converter = new pdfConverter(); 
var doc = converter.jsPDF('p', 'pt'); 

Typeerror: PDFConverter ist kein Konstruktor Was bedeutet, dass ich die jsPDF aus dem Paket kommt zu importieren, nicht nur jspdf?

Dann versuche ich

let pdfConverter = require('jspdf'); 
var converter = pdfConverter.jsPDF; 
var doc = new converter('p', 'pt'); 

Reference: jsPDF definiert nicht

Typeerror: Konverter kein Konstruktor ist

Ok offensichtlich, ich bin nicht das Richtige zu importieren oder nicht der richtige Weg. Was mache ich falsch?

Answer 1

Verwenden Sie nicht die Quelldatei. Nur npm install jspdf --save wie jedes andere Paket, und importieren Sie es mit var pdfConverter = require('jspdf');

Zweitens sind Sie nicht ein() in dieser Zeile var doc = new pdfConverter.jsPDF('p','pt');

etwas tun:

var converter = new pdfConverter(); 
var doc = converter.jsPDF('p', 'pt'); 

Answer 2

Ich weiß, das ist alt , aber ich dachte, es wäre hilfreich, wenn jemand eine voll funktionsfähige Probe posten würde.Es dauerte eine Weile, um dies herauszufinden, diese andere Stelle als Ausgangspunkt verwendet:

How to make PDF from React?

Sie verwenden erstellen reagieren-App Unter der Annahme, überschreiben Ihre App.js mit dem unten folgenden ...

import React, { Component } from 'react'; 
import pdfConverter from 'jspdf'; 
import logo from './logo.svg'; 
import './App.css'; 

class App extends Component { 
    constructor(props) { 
    super(props); 
    this.onClick = this.onClick.bind(this); 
    this.toDataUrl = this.toDataUrl.bind(this); 
    } 

    toDataUrl(url, callback) { 
    var xhr = new XMLHttpRequest(); 
    xhr.onload = function() { 
     var reader = new FileReader(); 
     reader.onloadend = function() { 
     callback(reader.result); 
     } 
     reader.readAsDataURL(xhr.response); 
    }; 
    xhr.open('GET', url); 
    xhr.responseType = 'blob'; 
    xhr.send(); 
    } 

    onClick() { 
     var doc = new pdfConverter('p','pt','letter'); 
     //console.log(doc.getFontList()); 
     this.toDataUrl('background.jpg', function(base64Img) { 
     var imgData = base64Img; 
     console.log(imgData); 
     console.log('Adding to doc.'); 
     doc.addImage(imgData, 'JPEG', 0, 0, 612, 792); 
     console.log('Image added.'); 
     doc.setFont('Times', 'Roman'); 
     doc.setFontSize(22); 
     doc.text(20, 50, 'Park Entry Ticket'); 
     doc.setFontSize(16); 
     doc.text(20, 80, 'Address1: '); 
     doc.text(20, 100, 'Address2: '); 
     doc.text(20, 120, 'Entry Date & time: '); 
     doc.text(20, 140, 'Expiry date & time: '); 
     console.log('About to save'); 
     doc.save("test.pdf"); 
     }); 
    } 

    render() { 
    return (
     <div className="App"> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>Welcome to React</h2> 
     </div> 
     <p className="App-intro"> 
      To get started, edit <code>src/App.js</code> and save to reload. 
      <input type='button' 
     onClick={this.onClick} value="Print"/> 
     </p> 
     </div> 
    ); 
    } 
} 

export default App;