html2canvas 和 jsPDF，promise 错误，createObjectURL 不是函数答案

【问题标题】：html2canvas and jsPDF, promise error, createObjectURL is not a Functionhtml2canvas 和 jsPDF，promise 错误，createObjectURL 不是函数
【发布时间】：2021-12-13 23:07:13
【问题描述】：

我正在开发一项功能，该功能从 Bootstrap 模式中获取内容，将其保存为 PDF 并将文件下载到我的本地 PC。

这是我的 HTML 和 listItem.js 文件的摘录

function downloadPDF() {
  // some stuff

  html2canvas($("#printItems")[0], {
    allowTaint: true
  }).then(function(canvas) {
    var imgData = canvas.toDataURL('image/jpeg, 1.0');
    var pdf = jsPDF({
      unit: 'mm',
      format: 'a4',
      orientation: 'portrait'
    });

    pdf.addImage(imgData, 'jpeg', 15, 2);
    pdf.save('test.pdf');
  });
}

<div class="modal-body" id="printItems">
  <div class="container" id="selectedItems"></div>  
</div>

<script type="text/javascript" src="/library/html2canvas.min.js"></script>
<script type="text/javascript" src="/library/jspdf.min.js"></script>

我遇到的问题是当我点击pdf.save('test.pdf') 时，函数失败，我收到以下错误：

Uncaught(in promise) TypeError: l(...).createObjectURL is not a function

我不确定我在这里做错了什么。另外，我正在使用 jsPDF 1.5.3 版和 html2canvas 1.1.4 版

【问题讨论】：

您使用的是哪个浏览器？大多数现代版本都支持createObjectURL：developer.mozilla.org/en-US/docs/Web/API/URL/…
另请注意，您缺少</script> 标签，但我认为这不会导致您的问题。
我使用的是 92.0.4515.107 版的 google Chrome 和 92.0.902.67 版的 MS Edge
@RoryMcCrossan，我打字很快。你是对的，这不是我的问题的原因。
在这种情况下，您需要获得最新版本的批准。除了解决实际导致代码正常运行的问题外，还会有无数的安全修复，这应该可以帮助您论证您的情况。

标签： javascript html jquery jspdf html2canvas

【解决方案1】：

我试过了，似乎没有任何问题。在下面的 sn-p 中检查我从 CDN 使用的版本。

我认为@Rory McCrossan 尝试新版本是对的。

<html>
<header>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
    <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
</header>

<body>

    <div class="modal-body" id="printItems">
        <div class="container" id="selectedItems"> Some Text...</div>
    </div>

    <script>
        function downloadPDF() {
            html2canvas($("#printItems")[0], {
                allowTaint: true
            }).then(function (canvas) {
                var imgData = canvas.toDataURL('image/jpeg, 1.0');
                var pdf = new jspdf.jsPDF({
                    unit: 'mm',
                    format: 'a4',
                    orientation: 'portrait'
                });

                pdf.addImage(imgData, 'jpeg', 15, 2);
                pdf.save('test.pdf');
            });
        }
        downloadPDF()
    </script>
</body>

</html>

【讨论】：

好吧，我一定是做错了什么。我最终得到了 html2canvas 和 jspdf 的最新最好的插件，但仍然遇到同样的问题。不确定我在这里缺少什么。
尝试其他浏览器，如 Opera，如果您的 chrome 由您的组织管理，可能会导致此类问题。试着告诉我。
好的，我尝试了 Edge 和 FireFox，但仍然得到相同的结果。我现在完全不知所措……这应该可行。我有 thml2canvas 和 jsPDF 的最新版本。现在我想知道我是否需要的不仅仅是 jspdf.umd.min.js 文件
您是否尝试过使用自己的笔记本电脑/PC 而不是您组织的笔记本电脑？如果没有，请尝试告诉我。
它必须是我们电脑的组织设置。我在家用笔记本电脑上试过这个，效果很好。 Geesh.....好吧，我可能必须找到替代方案。

【解决方案2】：

这是一个非常奇怪的问题，但我发现了问题所在，这与我使用的 jspdf 或 html2canvas 版本无关。出于某种原因，jspdf 不喜欢我在其他两个脚本中引用 URL。一旦我删除了实际的 URL（https）并且只有物理路径它工作正常。我在寻找版本控制并找出编写承诺的不同方法时走错了路。大声笑和SMH

我在上面发布的代码现在可以工作了。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。