jsPDFはjavascriptで定義されていません

Question

jsPDFライブラリをインポートしてPDFにエクスポートしようとしましたが、JavaScriptエラーが発生しますjsPDFが定義されていません。

私は他の同様の投稿を試しましたが、うまくいきませんでした。

ここでフィドルを手に入れました https://jsfiddle.net/aybhvf8e/1/

<script type="text/javascript" src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>

$( document ).ready(function() { var doc = new jsPDF(); var specialElementHandlers = { '#editor': function (element, renderer) { return true; } }; }) $('#cmd').click(function () {
    doc.fromHTML($('#content').html(), 15, 15, {
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
});


<div id="content">
     <h3>Hello, this is a H3 tag</h3>

    <p>A paragraph</p>
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>

Answer 1

あなたのコードは正しいようですが、cdnに問題があると思います。ここではデバッグを使用しました。

これが私が作成した1つの実用的な例であり、参照することができます。スタックオーバーフローの制限のためにPDFのダウンロードが表示されない場合は、このフィドルを使用してテストしてください。

作業中PDFデモをダウンロード

私が使用したcdnリンクは次のとおりです：JsPDF CDNLINK。あなたは間違いなく利用可能な他のバージョンを探すことができます。

function createPdf() {

  var doc = new jsPDF();
  
  source = $('#content')[0];
  
  specialElementHandlers = {
        '#editor': function (element, renderer) {
            return true
        }
    };
  
  doc.fromHTML(
    source,
    15,
    15, 
    {
      'width': 170,
      'elementHandlers': specialElementHandlers
    }
  );
  doc.save('sample-file.pdf')
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="content">
     <h3>Hello, this is a H3 tag</h3>

    <p>A paragraph</p>
</div>
<div id="editor"></div>
<button onclick="javascript:createPdf()" id="cmd">generate PDF</button>

Answer 2

このフォークで解決された2つの主要な問題を見つけました。まず、にリンクしていませんjspdf。あなたはhtmlコードでそれをすることができます：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>

次に、関数のclick外部にイベントリスナーを追加しready()ます。これにより、2つの問題が発生します。イベントがアタッチされない（ready()関数の理由を確認してください）ことと、ready()関数で定義した変数が関数で使用できない（スコープ外になる）clickことです。clickリスナーをリスナー内に設定することで、両方の問題を修正できますready。

$( document ).ready(function() { var doc = new jsPDF(); var specialElementHandlers = { '#editor': function (element, renderer) { return true; } }; $('#cmd').click(function () {
    doc.fromHTML($('#content').html(), 15, 15, {
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
});

})

Answer 3

VQR ..... 1つの質問ですが、私のアプリはネットワークのない場所で動作することがあるので、次の行はネットワークがないと動作しません。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>

だから、インストールしました...

npm install jspdf --save

しかし、今、ラインを機能させるために、どのファイルをJsカーペットにコピーする必要がありますか？

var doc = new jsPDF();