Comment inclure externe bibliothèque javascript dans reactjs

Je voudrais savoir comment il est possible d'inclure un javascript externe de la bibliothèque dans un projet react. Par exemple, j'ai aimerais importer le jspdf bibliothèque : https://github.com/MrRio/jsPDF/blob/master/jspdf.js et l'utiliser dans mon reactjs app.

Jusqu'à présent, j' essayé d'utiliser exiger 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 le faire fonctionner, j'ai fait quelque chose de laid, je copie de la source de jspdf-source.js dans mon réagir.jsx fichier et il suffit d'appeler jsPDF au lieu de pdfConverter.jsPDF. C'est définitivement pas de la bonne manière, mais ne peut pas succed à l'importation et l'utilisation de la bibliothèque.

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

-EDIT-

Quand je a l'aide de mon laid solution (copie de la source dans mon fichier) j'ai juste eu à faire ce qui suit :

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

Et elle fonctionnait parfaitement, s'attendre à ce que je a eu un très gros fichier

Après la solution proposée par @dannyjolie ci-dessous, j'ai importé jspdf directement à partir de la ngp, mais je ne suis toujours pas en mesure d'utiliser la bibliothèque. J'ai essayé le code suivant qui aboutissent à 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 j' importer le jsPDF venant de l'emballage, et pas seulement jspdf ?

Puis-je essayez

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 de toute évidence, je ne suis pas de l'importation de la bonne chose ou pas de la bonne façon.
Ce que je fais mal ?

OriginalL'auteur FLCcrakers | 2016-03-17

  1. 6

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

    Deuxièmement, vous êtes absent () dans cette ligne var doc = new pdfConverter.jsPDF('p','pt');

    Faire quelque chose comme ceci:

    var converter = new pdfConverter();
var doc = converter.jsPDF('p', 'pt');
    Merci pour votre réponse. Je ne savais pas que je peux installer jspdf avec npm. Est-il possible pour n'importe quelle bibliothèque ? (Je suis assez nouveau à mnp). Cependant il encore ne pas fonctionner comme prévu. Lorsque j'essaie var convertisseur de nouveaux pdfConverter(); j'obtiens ce message d'erreur TypeError: pdfConverter n'est pas un constructeur. Je suis toujours en manque de quelque chose mais ne savent pas quoi.
    Dans ce cas, c'était un pressentiment de la chance 🙂 npmjs.com/package/jspdf. Je n'ai pas utilisé jsPDF beaucoup de moi-même, je pense que je l'ai essayé une fois, mais à en juger par les exemples de code de l'initialisation est un peu différent que le code que vous avez fournis. Vous aurez probablement comprendre.
    Je ne peux toujours pas comprendre comment le faire correctement. J'ai certainement raté quelque chose. Plus tard, quand j'ai été de copier le code source, j'ai juste pu l'utiliser comme dans le doc "var doc = new jsPDF();" mais je sais que j'ai importé via npm-je pas capable de trouver le bon chemin... j'ai certainement manquer certains savoir mais ne savez pas lequel.
    Oui, je vois. J'ai essayé de le forcer à agir, mais le seul moyen que j'ai trouvé jusqu'à présent est d'utiliser une bonne vieille mode balise script avec jspdf et de travailler avec le global jsPDF fonction. La poisse.
    Bon à savoir, je commençais à me sentir fou à ce sujet.Tu veux dire que si je mets une balise de script, y compris ma bibliothèque dans mon index.html je devrais être en mesure d'atteindre le mondial jsPDF ? J'ai eu un coup d'essayer, mais vous ne savez pas comment le faire correctement avec reactjs.

    OriginalL'auteur dannyjolie

  2. 3

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

    Prendre JQuery comme un exemple. Mettre la ligne suivante dans votre /public/index.html:

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

    L'utiliser dans votre projet de la sorte:

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

    OriginalL'auteur Jason Kao

  3. 1

    Je sais que c'est vieux, mais j'ai pensé qu'il serait utile que quelqu'un a posté un travail complet de l'échantillon. Il m'a fallu un certain temps pour comprendre cela, à l'aide de ce post comme un point de départ:

    Comment faire des PDF à partir de Réagir?

    En supposant que vous êtes à l'aide de create-réagir-app, de remplacer votre App.js avec la suite 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;
    Notez que l'background.jpg est assis dans le dossier public. toDataUrl vient d'ici: stackoverflow.com/questions/6150289/...
    Je vous remercie beaucoup pour cela. Pas encore testé, mais semble être intéressant !
    Lorsque vous l'état d'importation pdfConverter de "jspdf'... où avez-vous d'inclure la bibliothèque de script? Dans index.html ou comme un nœud de module?

    OriginalL'auteur James Young