Cách bao gồm thư viện javascript bên ngoài trong reactjs

Question

Tôi muốn biết cách có thể bao gồm thư viện javascript bên ngoài trong dự án phản ứng. Ví dụ, tôi muốn nhập khẩu thư viện jspdf: https://github.com/MrRio/jsPDF/blob/master/jspdf.js và sử dụng nó trong ứng dụng reactjs của tôi.

Cho đến nay tôi cố gắng sử dụng đòi hỏi như thế này:

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

Tôi có lỗi sau: Lỗi Loại: pdfConverter.jsPDF không phải là một chức năng.

Để làm cho nó hoạt động, tôi đã làm điều gì đó xấu xí, tôi sao chép nguồn của jspdf-source.js vào tệp react.jsx của tôi và chỉ cần gọi jsPDF thay vì pdfConverter.jsPDF. Đó là chắc chắn không có cách đúng, nhưng không thể succed để nhập khẩu và sử dụng thư viện.

Bạn có thể cho tôi biết những gì tôi đang làm sai và cách tôi có thể sửa lỗi này không? Cảm ơn bạn

-EDIT-

Khi tôi đang sử dụng giải pháp xấu xí của tôi (sao chép mã nguồn thành tập tin của tôi) Tôi chỉ phải làm như sau:

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

Và nó đã làm việc hoàn toàn, mong rằng tôi có một tệp rất lớn

Sau giải pháp được đề xuất từ ​​@dannyjolie dưới đây, tôi đã nhập jspdf trực tiếp từ gói npm, nhưng tôi vẫn không thể sử dụng thư viện . Tôi cố gắng mã Mà dẫn sau để một lỗi:

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

Lỗi Loại: pdfConverter không phải là một constructor Nghĩa là tôi phải nhập jsPDF đến từ các gói, không chỉ jspdf?

Sau đó, tôi cố gắng

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

ReferenceError: jsPDF không được định nghĩa

Lỗi Loại: Chuyển đổi không phải là một constructor

Ok rõ ràng, tôi không nhập khẩu là điều đúng đắn hoặc không đúng cách. Tôi đang làm gì sai?

Answer 1

Trước hết, không sử dụng tệp nguồn. Chỉ cần npm install jspdf --save giống như bất kỳ gói khác, và nhập nó với var pdfConverter = require('jspdf');

Thứ hai, bạn đang bỏ lỡ một() trong dòng này var doc = new pdfConverter.jsPDF('p','pt');

Làm như thế này:

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

Answer 2

Tôi biết điều này là cũ , nhưng tôi nghĩ nó sẽ hữu ích nếu ai đó đăng một mẫu làm việc đầy đủ.Tôi đã mất một thời gian để con số này ra, sử dụng bài này khác như là một điểm khởi đầu:

How to make PDF from React?

Giả sử bạn đang sử dụng tạo-phản ứng ứng dụng, ghi đè lên App.js của bạn với những điều sau đây ...

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;