web-dev-qa-db-fra.com

Comment inclure une bibliothèque javascript externe dans reactjs

J'aimerais savoir comment il est possible d'inclure une bibliothèque javascript externe dans un projet react. Par exemple, je voudrais importer la bibliothèque jspdf: https://github.com/MrRio/jsPDF/blob/master/jspdf.js et l’utiliser dans mon application reactjs. 

Jusqu'à présent, j'ai essayé d'utiliser require comme ceci:

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

J'ai l'erreur suivante: TypeError: pdfConverter.jsPDF n'est pas une fonction .

Pour que cela fonctionne, j'ai créé quelque chose de moche, je copie le code source de jspdf-source.js dans mon fichier react.jsx et appelle simplement jsPDF au lieu de pdfConverter.jsPDF. Ce n'est certainement pas la bonne façon, mais ne peut pas importer et utiliser la bibliothèque. 

Pouvez-vous me dire ce que je fais mal et comment je peux corriger cela? Merci

-EDIT-

Lorsque j'utilisais ma mauvaise solution (copier la source dans mon fichier), je devais simplement procéder comme suit: 

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

Et cela fonctionnait parfaitement, attendez-vous à ce que j'ai un très gros fichier

Après la solution suggérée par @dannyjolie ci-dessous, j'ai importé jspdf directement à partir du paquet npm, mais je ne suis toujours pas en mesure d'utiliser la bibliothèque. J'ai essayé le code suivant qui a conduit à une erreur:

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

TypeError: pdfConverter n'est pas un constructeur Ce qui signifie que je dois importer le fichier jsPDF provenant du package, pas seulement jspdf?

Alors j'essaye 

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

ReferenceError: jsPDF n'est pas défini

TypeError: le convertisseur n'est pas un constructeur

Ok, évidemment, je ne fais pas la bonne chose ou pas la bonne façon. Qu'est-ce que je fais mal?

javascriptreactjsjspdf
6
FLCcrakers

Tout d'abord, n'utilisez pas le fichier source. npm install jspdf --save comme tout autre paquet et importez-le avec var pdfConverter = require('jspdf');

Deuxièmement, il manque un () dans cette ligne var doc = new pdfConverter.jsPDF('p','pt');

Faites quelque chose comme ça:

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

Si vous incluez le lien de fichier js externe dans votre /public/index.html, vous pouvez utiliser la bibliothèque externe avec le préfixe window.

Prenez JQuery comme exemple. Mettez la ligne suivante dans votre /public/index.html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Utilisez-le dans votre projet comme suit:

window.$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
3
Jason Kao

Je sais que c'est vieux, mais j'ai pensé qu'il serait utile que quelqu'un poste un échantillon de travail complet. Il m'a fallu un certain temps pour comprendre cela, en utilisant cet autre article comme point de départ: 

Comment faire PDF de React?

En supposant que vous utilisez create-react-app, écrasez votre App.js avec ce qui suit ci-dessous ...

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;
1
James Young