使用jsPDF将HTML字符串转换为PDF

Question

I have a variable named var = pictureModelHtml; 我有一个名为var = pictureModelHtml;的变量var = pictureModelHtml;

I have a for loop that create canvases and draw a picture on each canvas. 我有一个for循环，可创建画布并在每个画布上绘制图片。

for (i = 0; i < 10; i++) {
    pictureModelHtml += '<div class="canvas" id="'+id+'"></div>;
    pictureModelHtml += '<canvas id="'+uniqueId+'">picutre</canvas>';
}

$('.canvas').each(function(i) {
    //do something that draws a picture on a canvas corresponds to the canvas id. 
}

I stuck on drawing all the pictures to a PDF. 我坚持将所有图片绘制为PDF。 I am using jsPDF library to generate PDF. 我正在使用jsPDF库生成PDF。 I have: 我有：

var pdf = new jsPDF();
pdf.fromHTML(pictureModelHtml);
pdf.save("myfile.pdf");

The pdf file doesn't show any picutre. pdf文件未显示任何图片。 It is empty. 它是空的。 What did I miss?? 我错过了什么？？ Anybody has an idea how to do this? 有人知道如何执行此操作吗？ Please help!! 请帮忙！！

Answer 1

I think this code will be helpful for you. 我认为这段代码将对您有所帮助。 You can check working fiddle here 你可以在这里检查工作小提琴

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
    <script type="text/javascript">
        var pictureModelHtml = '';
        $().ready(function () {
            var imgData;
            html2canvas($("#scream"), {
                useCORS: true,
                logging: true,
                onrendered: function (canvas) {
                    imgData = canvas.toDataURL('image/png');
                    imgData.crossOrigin = "Anonymous";
                    var doc = new jsPDF('p', 'pt', 'a4');
                    doc.addImage(imgData, 'PNG', 10, 10);
                    $('#scream1').attr('src', imgData);

                    for (i = 0; i < 10; i++) {
                        pictureModelHtml += '<canvas id="canvas-' + i + '">picutre</canvas>';
                        $('#someHtml').html(pictureModelHtml);
                    }

                    setTimeout(function () {
                        $('canvas').each(function (i, canvas) {
                            var c = $(canvas)[0];
                            var ctx = c.getContext("2d");
                            var img = document.getElementById("scream1");
                            ctx.drawImage(img, 10, 10);
                        });
                    }, 1000);
                }
            });



        });

        var testDivElement = document.getElementById('someHtml');

        function savePDF(canvas) {
            var imgData;
            html2canvas($("#someHtml"), {
                useCORS: true,
                logging: true,
                onrendered: function (canvas) {
                    imgData = canvas.toDataURL('image/png');
                    var doc = new jsPDF('p', 'pt', 'a4');
                    doc.addImage(imgData, 'PNG', 10, 10);
                    //doc.save('sample-file.pdf');
                    setTimeout(function () { window.open(imgData) }, 1000);
                }
            });
        }


    </script>
</head>
<body>
    <img id="scream" width="220" height="277" src="http://e-cdn-images.deezer.com/images/artist/01eb92fc47bb8fb09adea9f763bb1c50/500x500.jpg" />
    <img id="scream1" style="display:none;" />
    <div id="someHtml"></div>
    <br />
    <button id="savePDFbutton" onclick="savePDF()">
        save pdf
    </button>
</body>
</html>

使用jsPDF将HTML字符串转换为PDF

问题描述

1 个解决方案

解决方案1
1 2017-07-20 03:50:24

使用jsPDF将HTML字符串转换为PDF

问题描述

1 个解决方案

解决方案1 1 2017-07-20 03:50:24

解决方案1
1 2017-07-20 03:50:24