Question

我尝试使用jsPDF库在PDF中导出DIV的内容。

问题在于，当我尝试导出div的内容时，我在pdf中看到的只是div的真实内容的一部分，并且我没有要导出的所有文档。

以下是代码：

// Javascript
function pdf() {
        var doc = new jsPDF('p', 'in', 'letter');
        var specialElementHandlers = {
            '#ricercaChat': function (element, renderer) {
                return true;
            }
        };
        doc.fromHTML($("#ricercaChat").html(), 15, 15, {
                'width':170,
                'elementHandlers': specialElementHandlers
        });
        doc.save('role.pdf');
    }

//HTML
<a href="#" onclick="pdf()"><img src="immagini/pdf1.png"></a>
<div id="ricercaChat" width="100%">  
...( html loaded with jQuery.load that is another page )</div>

我试图修改以下功能：

var htmlall = document.getElementById('ricercaChat').innerHTML; // there is ALL the html content
doc.fromHTML(htmlall, 15, 15, { ...

在此模式下，pdf完全空白。

我该如何解决这个问题？非常感谢

Answer 1

问题在于这段代码：

var specialElementHandlers = {
    '#ricercaChat': function (element, renderer) {
        return true;
    }
};

它的作用是，它告诉jsPDF忽略＆＃34; #ricercaChat ＆＃34;中的内容。同时生成pdf。因此，你得到一个空白的PDF格式。您可以在没有specialElementHandlers的情况下生成：

doc.fromHTML($("#ricercaChat").html(), 15, 15);

Answer 2

尝试此操作（从html创建图像）：

// Javascript
function pdf() {
     var canvas = document.getElementById('ricercaChat');
     // save canvas image as data url (png format by default)
     var dataURL = canvas.toDataURL();

     var imgData = dataURL;

     var doc = new jsPDF();
     doc.addImage(imgData, 'JPEG', 15, 40);

     doc.save('role.pdf');
}

JSPDF - 只是页面的一部分

2 个答案: