我正在制作一个功能，从Bootstrap模式中获取内容，将其保存为PDF并将文件下载到我的本地PC。
这是我的HTML和listtitem .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不是一个函数
我不知道我做错了什么。此外，我正在使用jsPDF的1.5.3版本和html2canvas的1.1.4版本
我试过了，似乎没有任何问题。在下面的代码片段中检查我从CDN中使用的版本。
我认为@Rory mcrossan尝试新版本是对的。
<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>
这是一个非常奇怪的问题，但我弄清楚了什么是错的，它真的与我使用的jspdf或html2canvas版本无关。由于某种原因，jspdf不喜欢我在其他两个脚本中引用URL。一旦我删除了实际的url (https)，只有物理路径，它工作得很好。我在错误的道路上寻找版本控制和找出写承诺的不同方法。LOL和SMH
我上面发布的代码现在可以工作了。