Question

jsPDF的addHTML需要html2canvas.js或rasterizeHTML.js。

我想使用rasterizeHTML.js，但它不起作用。在网上找不到任何例子。

使用html2canvas.js：

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>


<body>
    <p id="to-pdf">HTML content...</p>
</body>

JS

var pdf = new jsPDF('p','pt','a4');
pdf.addHTML(document.body,function() {
    pdf.save('web.pdf');
});

不使用rasterizeHTML.js（没有任何反应;没有错误）：

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rasterizehtml/1.2.2/rasterizeHTML.allinone.js"></script>


<body>
    <p id="to-pdf">HTML content...</p>
</body>

JS

var pdf = new jsPDF('p','pt','a4');
pdf.addHTML(document.body,function() {
    pdf.save('web.pdf');
});

我错过了什么？

Answer 1

最近我遇到了同样的问题，并设法从各种来源整理了一个可行的例子。

基本HTML

<div id="canvas" width="100%">
    <table class='CSSTableGenerator'>
        <tr>
            <td>Item</td>
            <td>Cost</td>
            <td>Description</td>
            <td>Available</td>
        </tr>
        <tr>
            <td>Milk</td>
            <td>$1.00</td>
            <td>Cow puss</td>
            <td>Out Of Stock</td>
        </tr>
        <tr>
            <td>Milk</td>
            <td>$1.00</td>
            <td>white stuff</td>
            <td>Out Of Stock</td>
        </tr>
    </table>
</div>
<button id="download">Create PDF</button>

JS

$(document).ready(function () {
    $('#download').click(function () {
        html2canvas(document.getElementById('canvas'), {
            onrendered: function (canvas) {
                var imgData = canvas.toDataURL('image/png');
                var doc = new jsPDF('p', 'mm');
                doc.addImage(imgData, 'PNG', 10, 10);
                doc.save('download.pdf');
            }
        });
    });
});

http://jsfiddle.net/andyg2/mtLqparw/

资源

https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js

https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js

jsPDF + rasterizeHTML无法正常工作？

1 个答案: