如何在 reactjs 中包含外部 JavaScript 库

How to include external JavaScript library in reactjs

本文关键字：JavaScript 包含外 reactjs      更新时间：2023-09-26

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

到目前为止，我尝试使用这样的要求： 

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

我有以下错误：类型错误：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');

引用错误：未定义 jsPDF

类型错误：转换器不是构造函数

好吧，很明显，我没有导入正确的东西或不正确的方式。我做错了什么？

如果在/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());
});

首先，不要使用源文件。就像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');
我知道

这很旧，但我认为如果有人发布完整的工作示例会有所帮助。 我花了一段时间才弄清楚这一点，以另一篇文章为起点：

如何从 React 制作 PDF？

假设您使用的是创建-反应-应用程序，请覆盖您的应用程序.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;
相关文章：