[英]How to include external JavaScript library in reactjs
我想知道如何在 React 項目中包含外部 JavaScript 庫。 例如,我想導入 jspdf 庫:https://github.com/MrRio/jsPDF/blob/master/jspdf.js 並在我的 reactjs 應用程序中使用它。
到目前為止,我嘗試像這樣使用 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 is not a function 。
為了使它工作,我做了一些丑陋的事情,我將 jspdf-source.js 的源代碼復制到我的 react.jsx 文件中,然后調用 jsPDF 而不是 pdfConverter.jsPDF。 這絕對不是正確的方法,但無法成功導入和使用該庫。
你能告訴我我做錯了什么以及我該如何糾正嗎?
-編輯-
當我使用我丑陋的解決方案(將源復制到我的文件中)時,我只需要執行以下操作:
var doc = new jsPDF('p','pt);
它運行良好,希望我有一個非常大的文件
在@dannyjolie bellow 提出建議的解決方案之后,我直接從 npm 包中導入了 jspdf,但我仍然無法使用該庫。 我嘗試了以下導致錯誤的代碼:
var pdfConverter = require('jspdf');
var converter = new pdfConverter();
var doc = converter.jsPDF('p', 'pt');
TypeError: pdfConverter is not a constructor這意味着我必須導入來自包的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
下行放在您的/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 pdfConverter = require('jspdf');
其次,您在這一行中缺少 () var doc = new pdfConverter.jsPDF('p','pt');
做這樣的事情:
var converter = new pdfConverter();
var doc = converter.jsPDF('p', 'pt');
我知道這是舊的,但我認為如果有人發布完整的工作樣本會有所幫助。 我花了一段時間才弄清楚這一點,使用另一篇文章作為起點:
假設您正在使用 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;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.