logo标签列表

jsPDF + rasterizeHTML不能工作？

javascriptjspdf
7

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');
});

我错过了什么？

你有关于这个的任何消息吗？ - JpCrow
这个问题还存在吗？你看到了什么错误信息？我正在尝试使用rasterizeHTML.js与jspdf 1.5，并在rasterizeHTML.js的1009行处得到“Uncaught TypeError：Cannot read property'inlineReferences' of undefined”的错误。 - pjmorse
1个回答
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/

Resources

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接