実現したいこと

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

前提

記録をダウンロードする機能を作りたく、markdwonで文章を作成。
そのあと、showdownを使い、htmlを生成。
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

行動規範の内容に同意します

回答2件

自己解決

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

よく読んだらありました

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>