質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

2259閲覧

CDNを使いjsPDFの読み込みを行おうとすると失敗する

2PC

総合スコア5

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2023/03/07 06:21

実現したいこと

  • jsPDFを読み込む
  • CDNで読み込む

前提

  1. 記録をダウンロードする機能を作りたく、markdwonで文章を作成。
  2. そのあと、showdownを使い、htmlを生成。
  3. htmlからPDFへjsPDFで実現しようとした

発生している問題・エラーメッセージ

Uncaught SyntaxError: The requested module 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js' does not provide an export named 'jsPDF' (at main.js:240:10)

該当のソースコード

JavaScript

1// main.js 2// 省略 3const markdown = quiz.createMarkdown(); 4const converter = new showdown.Converter(); 5const html = converter.makeHtml(markdown); 6 7import { jsPDF } from "https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"; 8const pdf = new jsPDF(); 9pdf.html(html, { 10 callback: function () { 11 pdf.save('hello-world.pdf'); 12 } 13}); 14// 省略

html

1<!-- index.html --> 2<!DOCTYPE html> 3<html lang="ja"> 4 5<head> 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <title>VLSM learning</title> 9 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma-rtl.min.css"> 10 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/cferdinandi/tabby@12/dist/css/tabby-ui.min.css"> 11 <link rel="stylesheet" href="https://unpkg.com/bulma-prefers-dark"> 12 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-checkradio@2.1.3/dist/css/bulma-checkradio.min.css"> 13 <script src="https://cdn.jsdelivr.net/gh/cferdinandi/tabby@12/dist/js/tabby.polyfills.min.js" defer></script> 14 <script src="script.js" defer></script> 15 <script src="https://cdn.jsdelivr.net/npm/ipaddr.js@2/lib/ipaddr.min.js"></script> 16 <script src="https://unpkg.com/form-storage@1.2.0/build/form-storage.js"></script> 17 <script src="https://cdn.jsdelivr.net/npm/showdown@2.1.0/dist/showdown.min.js" 18 integrity="sha256-iOtvu+DCcN3zOEruDJYg0HDgkKJuB8Z0Ia42yQO11kk=" crossorigin="anonymous"></script> 19 <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js" type="module"></script> 20 <script src="main.js" defer type="module"></script> 21</head>

試したこと

  • <script src="main.js" defer type="module"></script>のtype="module"を外したり付けたり
  • html内にscriptタグで直接記述
  • 異なるバージョンで実行
  • 単体で実行。以下のコードはテスト用に実行 test.html:23:21でエラー

html

1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>Markdown to PDF</title> 6 <style> 7 body { 8 font-family: Arial, sans-serif; 9 font-size: 12pt; 10 } 11 </style> 12</head> 13<body> 14 <div id="pdf"></div> 15 <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"></script> 16 <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script> 17 <script> 18 const markdown = '# hello world!'; 19 const converter = new showdown.Converter(); 20 const html = converter.makeHtml(markdown); 21 const pdf = new jsPDF(); // ! err : Uncaught ReferenceError: jsPDF is not defined 22 pdf.html(html, { 23 callback: function () { 24 pdf.save('hello-world.pdf'); 25 } 26 }); 27 </script> 28</body> 29</html>

補足情報(FW/ツールのバージョンなど)

  • テストブラウザ
    • Google chrome バージョン: 110.0.5481.178(Official Build) (64 ビット)
    • Firefox,Microsoft edge でも変わらなかった
  • httpサーバー
    • VScode 拡張機能 Live Server

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

グローバルで有効にする必要あり

よく読んだらありました

jsPDFをブラウザで実行するためには、次のように書き換える必要があります。

JavaScript

1// 元のコード7行目 2const { jsPDF } = window.jspdf; 3// これで有効になります。

同時に、ほかのライブラリも読み込む必要があります。
index.htmlに次のコードを追加します。
読み込んだもの一覧

  • dompurify
    • 有害なコードを含まないようサニタイズするため
  • html2canvas
    • レンダリングのため

html

1<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.1/purify.min.js" 2 integrity="sha512-TU4FJi5o+epsahLtM9OFRvH2gXmmlzGlysk9wtTFgbYbMvFzh3Cw1l3ubnYIvBiZCC/aurRHS408TeEbcuOoyQ==" 3 crossorigin="anonymous" referrerpolicy="no-referrer"></script> 4 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" 5 integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA==" 6 crossorigin="anonymous" referrerpolicy="no-referrer"></script>

年のための補足

パッケージを読み込むときは、CDNを検索、説明をよみ適切なものを選択してください。

投稿2023/03/08 13:22

2PC

総合スコア5

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

まずは公式のREADMEを読むのが良いんじゃないでしょうか。
読み込むのが jspdf.umd.min.js なら、使い方は Other Module Formats でしょう。

投稿2023/03/07 06:39

int32_t

総合スコア21190

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

2PC

2023/03/08 13:22

ありがとうございました。完全に私の努力不足、確認不足でした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問