在 jspdf 中插入图像以阻止生成 pdf
Insert image in jspdf stopping pdf from generating
我正在创建一个 Razor Pages Web 应用程序,我正在尝试创建一个按钮,单击该按钮会生成 pdf。为此,我使用 jsPDF 将 html 转换为 pdf。我能够让它创建和打开 pdf,但是当我尝试添加图像时,我 运行 遇到了单击按钮没有任何 pdf 的问题。我能够使用以下代码创建无图像的 pdf:
按钮代码:
<button class="btn btn-sm btn-secondary order-button" id="testImage" onclick="this.form.submit(@Model.Project.ID)">Create Image</button>
脚本中的代码:
<script type="text/javascript">
$(function () {
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#testImage').click(function () {
var doc = new jsPDF();
doc.fromHTML($('#testImagePDF').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
//THIS IS WHERE I WAS PUTTING THE IMAGE
doc.output("dataurlnewwindow");
doc.save('TestImage_' + document.getElementById('testNum').value + '.pdf');
});
});
</script>
Html 测试图像:
<form method="post" hidden>
<div id="testImagePDF">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.6/jspdf.plugin.autotable.min.js"></script>
<header style="border-bottom: 1px solid #000">
<h2 style="margin:0; padding:0">Test Image</h2>
</header>
</div>
</form>
当我将以下代码添加到脚本代码中注释的位置时,单击按钮后 pdf 不再打开:
//Code to insert the image
var line = new Image();
line.src = 'BlackRectangle.jpg';
doc.addImage(line, 'jpg', 10, 10, 80, 40);
图像 'BlackRectangle.jpg' 位于我项目的 wwwroot 文件夹中。有谁知道为什么在添加图像后我的 pdf 无法打开 and/or 如何修复它以便打开并显示图像?
注意:-这是在 Razor 页面的 'Details' 页面中(使用 CRUD 创建)
如果你在浏览器中按f12
,你会发现这个错误。图片路径不对
在图片前加一个“/”。
line.src = '/BlackRectangle.jpg';
我正在创建一个 Razor Pages Web 应用程序,我正在尝试创建一个按钮,单击该按钮会生成 pdf。为此,我使用 jsPDF 将 html 转换为 pdf。我能够让它创建和打开 pdf,但是当我尝试添加图像时,我 运行 遇到了单击按钮没有任何 pdf 的问题。我能够使用以下代码创建无图像的 pdf:
按钮代码:
<button class="btn btn-sm btn-secondary order-button" id="testImage" onclick="this.form.submit(@Model.Project.ID)">Create Image</button>
脚本中的代码:
<script type="text/javascript">
$(function () {
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#testImage').click(function () {
var doc = new jsPDF();
doc.fromHTML($('#testImagePDF').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
//THIS IS WHERE I WAS PUTTING THE IMAGE
doc.output("dataurlnewwindow");
doc.save('TestImage_' + document.getElementById('testNum').value + '.pdf');
});
});
</script>
Html 测试图像:
<form method="post" hidden>
<div id="testImagePDF">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.6/jspdf.plugin.autotable.min.js"></script>
<header style="border-bottom: 1px solid #000">
<h2 style="margin:0; padding:0">Test Image</h2>
</header>
</div>
</form>
当我将以下代码添加到脚本代码中注释的位置时,单击按钮后 pdf 不再打开:
//Code to insert the image
var line = new Image();
line.src = 'BlackRectangle.jpg';
doc.addImage(line, 'jpg', 10, 10, 80, 40);
图像 'BlackRectangle.jpg' 位于我项目的 wwwroot 文件夹中。有谁知道为什么在添加图像后我的 pdf 无法打开 and/or 如何修复它以便打开并显示图像?
注意:-这是在 Razor 页面的 'Details' 页面中(使用 CRUD 创建)
如果你在浏览器中按f12
,你会发现这个错误。图片路径不对
在图片前加一个“/”。
line.src = '/BlackRectangle.jpg';