如何在React中引入外部JavaScript库

Question

我想知道如何在React项目中导入外部JavaScript库，例如我想要导入jspdf库：https://github.com/MrRio/jsPDF/blob/master/jspdf.js，并在我的React应用程序中使用它。

我尝试使用require的方式：

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

我遇到了以下错误：TypeError: pdfConverter.jsPDF 不是一个函数。

为了让它工作，我做了一些丑陋的事情，将 jspdf-source.js 的源代码复制到我的 react.jsx 文件中，并调用 jsPDF 而不是 pdfConverter.jsPDF。这绝对不是正确的方法，但我试图导入和使用该库并没有成功。

您能告诉我我做错了什么以及如何纠正吗？

-编辑-

当我使用我的不恰当的解决方案（将源代码复制到我的文件中）时，我只需要执行以下操作：

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

一切都很顺利，只是我有一个非常大的文件。

在@dannyjolie建议下，我直接从npm软件包中导入了jspdf，但我仍然无法使用该库。我尝试了以下代码，但产生了错误：

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

类型错误: pdfConverter不是构造函数 这意味着我需要从包中导入jsPDF而不仅仅是jspdf吗？

然后我尝试了...

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

ReferenceError: jsPDF未定义

TypeError: 转换器不是构造函数

显然，我没有正确导入或者导入方式不正确。 我做错了什么？

- FLCcrakers

Answer 1

如果你在/public/index.html中包含外部js文件链接，你可以使用window前缀来使用外部库。

以JQuery为例，在/public/index.html中加入以下代码：

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

像这样在您的项目中使用：

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

- Jason Kao

Answer 2

首先，不要使用源代码文件。只需像任何其他软件包一样使用npm install jspdf --save进行安装，并使用var pdfConverter = require('jspdf'); 进行导入。

其次，在这一行中，您缺少一个()：var doc = new pdfConverter.jsPDF('p'，'pt');

可以这样做：

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

- dannyjolie

---

谢谢你的回答。我不知道我可以用npm安装jspdf。任何库都可以吗？（我对npm还很陌生）。但是它仍然没有按预期工作。当我尝试var converter new pdfConverter();时，我会收到此消息TypeError: pdfConverter不是构造函数。我仍然缺少一些东西，但不知道是什么。 - FLCcrakers

我仍然无法正确地解决这个问题。我肯定漏掉了什么。后来，当我复制源代码时，我可以像在文档中一样使用它“var doc = new jsPDF();”，但是现在我通过npm导入后找不到正确的方法... 我肯定缺少一些知识，但不知道是哪些。 - FLCcrakers

是的，我明白了。我一直在试图欺骗它以使其正常工作，但到目前为止，我想到的唯一方法就是使用一个传统的脚本标签与jspdf一起使用，并使用全局jsPDF函数进行操作。很遗憾。 - dannyjolie

很好知道，我开始对此感到疯狂。你的意思是，如果我在我的index.html中放置一个包含我的库的脚本标签，我就应该能够访问全局jsPDF？我尝试了一下，但不确定如何在reactjs中正确地执行它。 - FLCcrakers

正确的做法是将<script src="jspdf.min.js"></script>放在head标签中或其他位置，这样全局的jsPDF函数就可以使用了。如果你使用linter，它可能会抗议，但你可以在lint配置中添加jsPDF作为全局变量。在eslint中，可以这样写："globals": {"jsPDF": true}。 - dannyjolie

Answer 3

我知道这可能有点过时，但是如果有人发布一个完整可用的示例代码将会很有帮助。在使用另一篇文章作为起点之后，我花了一些时间才弄清楚这个问题：

如何从React制作PDF?

假设您正在使用create-react-app，请使用以下内容覆盖您的App.js文件...

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;

- James Young

---

请注意，background.jpg 位于 public 文件夹中。toDataUrl 函数来源于此处：https://dev59.com/d2025IYBdhLWcg3wNTAV#20285053?s=1|0.0000#20285053 - James Young

非常感谢您。虽然还没有测试，但似乎很有趣！ - FLCcrakers

当你声明从'jspdf'导入pdfConverter时...你在哪里包含库脚本？在index.html中还是作为节点模块？ - Sebastiandg7