在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>

testImage 的 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 将无法打开和/或如何修复它以便打开并显示图像？

注意：-这是在 Razor 页面的“详细信息”页面中（使用 CRUD 创建）

Answer 1

如果您在浏览器中按f12，您会发现错误。图片路径不正确。

在图片前加一个“/”。

line.src = '/BlackRectangle.jpg';