在 jspdf 中插入图像以阻止生成 pdf

Question

我正在创建一个 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 创建）

Answer 1

如果你在浏览器中按f12，你会发现这个错误。图片路径不对

在图片前加一个“/”。

line.src = '/BlackRectangle.jpg';

在 jspdf 中插入图像以阻止生成 pdf

Insert image in jspdf stopping pdf from generating

javascript

asp.net-core

pdf

razor-pages

jspdf