将html内容导出为PDF

Question

​

<script>
var doc = new jsPDF();
var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    }
};

$('#cmd').click(function () {
    doc.fromHTML($('#content').html(), 15, 15, {
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
});
</script>

<div id="content">
     <h3>Hello, this is a H3 tag</h3>

    <p>a pararaph</p>
	<img src="4.jpg" />
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>

​

我正在将html导出到pdf。没有图像在html内容pdf导出正确，但如果我添加图像到HTML内容它创建空白PDF。

Answer 1

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
<script>
function toPdf() {
var doc = new jsPDF();
// We'll make our own renderer to skip this editor
    var specialElementHandlers = {
        '#editor' : function(element, renderer) {
            return true;
        }
    };

    // All units are in the set measurement for the document
    // This can be changed to "pt" (points), "mm" (Default), "cm", "in"
    doc.fromHTML($('#render_me').get(0), 30, 50, {
        'width' : 170,
        'elementHandlers' : specialElementHandlers
    });

    doc.save('sample-file.pdf');
}

给id="render_me“来分割你想要渲染的东西。例如

<table id="render_me"></table>

Answer 2

当使用fromHTML()时，在回调中保存pdf是很重要的，否则在保存文档时它将无法完成渲染。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
<script>
$(document).ready(function() {
    var doc = new jsPDF();
    $('#cmd').click(function () {
        doc.fromHTML($('#content').html(), 15, 15, {
            'width': 170,
        }, function () {
            doc.save('sample-file.pdf')
        });
    });
});
</script>

<div id="content">
     <h3>Hello, this is a H3 tag</h3>

    <p>a pararaph</p>
        <img src="//i.imgur.com/7NtRajR.jpg" />
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>

演示：https://jsfiddle.net/qcyspvy7/