如何使用jspdf在html中渲染img

Question

I want to convert my web page to pdf, but having a jspdf image does not render the web for me, it leaves my screen blank and I get the following error: jsPDF Warning: rendering issues?我想将我的网页转换为 pdf，但是 jspdf 图像不会为我呈现网页，它使我的屏幕空白，我收到以下错误：jsPDF 警告：呈现问题？ provide a callback to fromHTML!提供对 fromHTML 的回调！

    <html lang="en">
<head>
    <title>prueba</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>

<body>

    <h1 class="mx-5 my-5">prueba okey</h1>

    <div class="contianer my-5 mx-5" id="prueba1">
        <img src="img/debian.png" alt="">
        <h1>texto en grande</h1>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi assumenda, modi nihil adipisci quia nesciunt
        repellendus ab laboriosam illo suscipit corporis illum fugiat eum soluta eius! Eaque nisi veniam ratione.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti quod at cumque sapiente illum eveniet minus
        nostrum laboriosam beatae facilis omnis nemo, impedit fugit, autem molestiae ex culpa itaque labore?

        <h4>El usuario {{usuario.nombre}} {{usuario.apellidos}} trabaja como {{usuario.trabajo}}</h4>
    </div>




    <script>
        var doc = new jsPDF();
        var elementHTML = $('#prueba1').html();
        var specialElementHandlers = {
            '#elementH': function (element, renderer) {
                return true;
            }
        };

        doc.fromHTML(elementHTML, 15, 15, {
            'width': 170,
            'elementHandlers': specialElementHandlers
        });

        doc.save('sample-document.pdf');

    </script>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></s`introducir el código aquí`cript>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>

</html>

I don't know how I can solve it, and I would also like to know if it is possible to display the dpf on the web without it being downloaded automatically, thank you very much.不知道怎么解决，我也想知道是否可以在网页上显示dpf而不自动下载，非常感谢。

Answer 1

Try to include the image as a base64-encoded image directly in the CSS尝试将图像作为 base64 编码图像直接包含在 CSS 中

or else try to use Html2Canvas npm module and use pdf.addHTML() instead of pdf.fromHTML().或者尝试使用 Html2Canvas npm 模块并使用 pdf.addHTML() 而不是 pdf.fromHTML()。

Example code snippet:示例代码片段：

var pdf = new jsPDF('p', 'pt', 'letter');
pdf.addHTML($('#IDOfHTMLElementToConvertToPdf')[0], () => {
    pdf.save('filename.pdf');
});

如何使用jspdf在html中渲染img

问题描述

1 个解决方案

解决方案1
0 2020-09-24 07:20:22

如何使用jspdf在html中渲染img

问题描述

1 个解决方案

解决方案1 0 2020-09-24 07:20:22

解决方案1
0 2020-09-24 07:20:22