web-dev-qa-db-ja.com

反応JavaScriptに外部JavaScriptライブラリを含める方法

どのようにして外部のJavaScriptライブラリをreactプロジェクトに含めることができるか知りたいのですが。たとえば、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は関数ではありません。

これを機能させるために、醜いものを作りました。jspdf-source.jsのソースをreact.jsxファイルにコピーし、pdfConverter.jsPDFの代わりにjsPDFを呼び出します。それは間違いなく正しい方法ではありませんが、ライブラリをインポートして使用することに成功することはできません。

私が間違っていることと、これをどのように修正できるか教えてください。ありがとうございました

-EDIT-

醜いソリューション（ソースをファイルにコピーする）を使用しているときは、次のことを行うだけで済みます。

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

そして、それは完全に機能していました。非常に大きなファイルがあったと思います

@dannyjolie bellowから提案された解決策の後、私はjspdfをnpmパッケージから直接インポートしましたが、それでもライブラリを使用できません。エラーにつながる次のコードを試しました：

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

TypeError：pdfConverterはコンストラクタではありませんjspdfだけでなく、パッケージからのjsPDFをインポートする必要があるという意味ですか？

その後、私は試してみます

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

ReferenceError：jsPDFが定義されていません

TypeError：コンバーターはコンストラクターではありません

わかりました、私は正しいものをインポートしていないか、正しい方法ではありません。私は何を間違っていますか？

javascriptreactjsjspdf
11
FLCcrakers

まず、ソースファイルを使用しないでください。他のパッケージと同じように_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');
_
9
dannyjolie

/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());
});
9
Jason Kao

私はこれが古いことを知っていますが、誰かが完全な実用的なサンプルを投稿した場合に役立つと思いました。この他の投稿を開始点として使用して、これを理解するにはしばらく時間がかかりました。

作成方法PDF Reactから？

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