Harici javascript kitaplığını reactjs'e dahil etme

Question

Bir tepki projesine harici bir javascript kitaplığı eklemenin nasıl mümkün olabileceğini bilmek istiyorum. Örnek olarak, jspdf kütüphanesini almak istiyorum: https://github.com/MrRio/jsPDF/blob/master/jspdf.js ve onu reajları uygulamasında kullanıyorum.

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

aşağıdaki hatayı var: TypeError: pdfConverter.jsPDF bir işlev değil

Şimdiye kadar böyle gerektiren kullanmaya çalıştı.

Çalışmasını sağlamak için çirkin bir şey yaptım, jspdf-source.js kaynağını react.jsx dosyasına kopyaladım ve pdfConverter.jsPDF yerine jsPDF'yi çağırıyorum. Bu kesinlikle doğru bir yol değil, ancak kütüphaneyi ithal etmek ve kullanmak için başarılı olamaz.

Neyi yanlış yaptığımı ve bunu nasıl düzeltebileceğimi söyleyebilir misiniz? Benim çirkin çözüm (benim dosyaya kaynak kopyalayarak) kullanılarak zaman Sadece aşağıdaki yapmak zorunda size -EDIT-

ederiz:

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

Ve çalışıyordu mükemmel, çok büyük bir dosyam olmasını bekledim

@dannyjolie bellow'dan önerilen çözümden sonra, jspdf'yi doğrudan npm paketinden aldım, ancak yine de kitaplığı kullanamıyorum .

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

TypeError: PDFConverter kurucu değil ben jsPDF paketine, sadece jspdf gelen ithal etmek zorunda Anlamı Ben bir hata aşağıdaki kod wich öne çalıştı? jsPDF

TypeError tanımlı değil:, dönüştürücü besbelli

Tamam kurucu değil doğru olanı ithal değilim

Sonra

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

ReferenceError deneyin ya da doğru yol değil. Neyi yanlış yapıyorum?

Answer 1

Her şeyden önce, kaynak dosyayı kullanmayın. Bu eski biliyorum

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

Answer 2

: Tıpkı diğer paket gibi npm install jspdf --save ve İkinci var pdfConverter = require('jspdf');

ile içe, bu çizgide bir() var doc = new pdfConverter.jsPDF('p','pt');

Böyle bir şey yapmak kaçırıyorsun ama birisinin tam bir örnek çalışmasını yayınlamasının yararlı olacağını düşündüm.Bu bir başlangıç ​​noktası olarak bu diğer yazı kullanarak, bu anlamaya biraz zaman aldı:

How to make PDF from React?

aşağıdaki aşağıdaki ile App.js üzerine oluşturabilir-tepki-uygulamasını kullanıyorsanız varsayarsak ...

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;