javascript jsPDF：addHTML 方法不起作用

jsPDF: addHTML method not working

提问by vinesh

I created html table and tried to generate pdf using jsPDF.

我创建了 html 表并尝试使用 jsPDF 生成 pdf。

I have used following code:

我使用了以下代码：

var pdf = new jsPDF('p','pt','a4');  
pdf.addHTML(document.getElementById('pdfTable'),function() {
  console.log('pdf generated');
});
pdf.save('pdfTable.pdf');

I am getting blank pdf file. Am I doing anything wrong?

我得到空白的 pdf 文件。我做错了什么吗？

Here is a plunkerfor this.

这是一个plunker。

Working demoof jsPDF with addHTML function.

带有 addHTML 功能的 jsPDF工作演示。

回答by Aks

Made working plunkerfor this: Update: I have updated the plunker and made it work with addHTML()function:

为此制作了工作plunker：更新：我已经更新了 plunker 并使其与addHTML()功能一起工作：

var pdf = new jsPDF('p','pt','a4');
//var source = document.getElementById('table-container').innerHTML;
console.log(document.getElementById('table-container'));
var margins = {
   top: 25,
   bottom: 60,
   left: 20,
   width: 522
};
// all coords and widths are in jsPDF instance's declared units
// 'inches' in this case
pdf.text(20, 20, 'Hello world.');
pdf.addHTML(document.body, margins.top, margins.left, {}, function() {
   pdf.save('test.pdf');
});

You can see plunkerfor more details.

您可以查看plunker了解更多详细信息。

回答by Caveman

Change this in app.js:

在 app.js 中更改：

  pdf.addHTML(document.getElementById('pdfTable'),function() {
      });
  pdf.save('pdfTable.pdf');

for this one:

对于这个：

pdf.addHTML(document.getElementById('pdfTable'),function() {
    pdf.save('pdfTable.pdf');
});

回答by Wasskinny

I took out everything but these:

除了这些，我取出了所有东西：

<script src="//mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
<script src="//html2canvas.hertzen.com/build/html2canvas.js"></script>

then I used this:

然后我用了这个：

  $(document).ready(function() {

        $("#pdfDiv").click(function() {

    var pdf = new jsPDF('p','pt','letter');

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

    pdf.addHTML($('#rentalListCan').first(), function() {
        pdf.save("rentals.pdf");
    });
    });
});

I can print the table... looks great with chrome, safari or firefox, however, I only get the first page if my table is very large.

我可以打印表格...使用 chrome、safari 或 firefox 看起来很棒，但是，如果我的表格非常大，我只会得到第一页。

回答by JCristobal

In app.js change:

在 app.js 更改：

  pdf.addHTML(document.getElementById('pdfTable'),function() {

  });
  pdf.save('pdfTable.pdf');

to

到

  pdf.addHTML(document.getElementById('pdfTable'),function() {
      pdf.save('pdfTable.pdf');
  });

If you see a black background, you can add to sytle.css "background-color: white;"

如果看到黑色背景，可以在 sytle.css 中添加“background-color: white;”

回答by Vinicius Rodrigues

Instead of using the getElementById() you should use querySelector()

您应该使用 querySelector() 而不是使用 getElementById()

var pdf = new jsPDF('p','pt','a4');  
pdf.addHTML(document.querySelector('#pdfTable'), function () {
  console.log('pdf generated');
});

pdf.save('pdfTable.pdf');

回答by Hardik Chaudhary

I have test this in your plunker.

我已经在你的plunker 中测试过了。

Just update your app.js

只需更新您的 app.js

pdf.addHTML(document.getElementById('pdfTable'), function() {
      pdf.save('pdfTable.pdf');
});

update your css file:

更新你的 css 文件：

#pdfTable{
  background-color:#fff;
}