如何获得jsPDF来从具有溢出集的元素中创建图像/ pdf,从而使其具有滚动条。 粘贴到addHTML的“具有播放”页面( http://mrrio.github.io/jsPDF/ )中的以下示例将仅为显示的div部分生成pdf,即使我选择了“中间” div:

var outer = document.createElement('div');
outer.style.height = "100px";
outer.style.overflow = "scroll";

var middle = document.createElement('div');

for ( var i=0; i<35;i++ ) {
    var inner = document.createElement('div');
    inner.style.border = "thick solid #0000ff";
    inner.style.padding = "10px";

    middle.appendChild(inner);
}

outer.appendChild(middle);
document.body.appendChild(outer);

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

pdf.addHTML(outer,function() {
    var string = pdf.output('datauristring');
    $('.preview-pane').attr('src', string);
});

(基本上,这是使用滚动条创建一个div,在其中添加一个div,然后在中间一个div中添加一整堆div。有足够的内容可以滚动到屏幕外,因此pdf不会将它们拾取。我想到了弹出一个新窗口,但如果这样做,我必须弄清楚所有不同的样式表才能进入弹出窗口。)

#1楼 票数:0

看一下这个讨论: https : //github.com/MrRio/jsPDF/issues/270

我在html2canvas.js中使用addHtml()方法来制作pdf,但是对于大型数据表,它不会生成pdf,因为简短的内容还不错。 请帮我这是我的代码

弗拉门戈回信者:

我开始研究分解长HTML页面的功能。

试试看: https : //rawgit.com/Flamenco/jsPDF/text-html-table-page-break/examples/html2pdf/test-long-html-table.html

该示例代码创建一个长表并以此生成PDF。 也许他的设置对您有用。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Long Table</title>
    </head>

<script src='../../libs/require/require.js'></script>
<script>
require_baseUrl_override = '../../';
require(['../../libs/require/config'], function(){
require(['jspdf.plugin.canvas', 'libs/html2pdf', 'libs/html2canvas/dist/html2canvas', 'libs/saveas'], function(){

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

// Enable auto page wrap (there are still margin-top issues...)
pdf.context2d.pageWrapY = pdf.internal.pageSize.height-20;

// create a long table
var table = document.createElement('table');
for (var i=1; i<1000; i++){
    var tr=document.createElement('tr');
    var td=document.createElement('td');
    td.innerHTML = "Item " + i;
    tr.appendChild(td);
    table.appendChild(tr);
}
document.body.appendChild(table);

// render body to pdf
html2pdf(document.body, pdf, function(){
    pdf.save('Test.pdf');

});

}); // require
}); // require
</script>

    <body>
    </body>
</html>

该代码有点混乱,但它可以工作。

  ask by curmudgeon translate from so

未解决问题?本站智能推荐:

1回复

jsPDF-.addHTML不是函数

我正在尝试使用jsPDF库将HMTL页面(一种形式)转换为pdf,这是我所做的: “ btn”是我单击以获得pdf的按钮。 我遇到的问题是,当我单击此按钮时,出现TypeError:pdf.addHTML()不是HMTLButtonElement的函数。 信息。 浏览了多个主题相同的帖
2回复

通过jsPDF的addHTML将多个元素添加到PDF

我正在使用angular-ui选项卡集来显示几个单独的信息位。 因为未激活的选项卡的实际内容是隐藏的,所以如果仅添加页面的整个正文,则不会打印出来。 您在打印后看到的唯一标签内容是当前活动的标签。 我试图使用addHTML方法打印这些选项卡中的所有内容以及页面中的另一个元素,以保留其外观。
6回复

jsPDF:addHTML方法不起作用

我创建了html表,并尝试使用jsPDF生成pdf。 我使用了以下代码: 我得到空白的pdf文件。 我做错什么了吗? 这是一个小问题。 具有addHTML功能的jsPDF的工作演示 。
1回复

如何在jsPDF中使用addHTML函数

能告诉我如何在jsPDF库中使用addHTML函数吗? 我试图将网页转换为pdf。 想要使用addHTML函数。 让我知道需要传递哪些参数才能将整个网页转换为带有标题,徽标,正文等的pdf
3回复

在AngularJS中使用jsPDF中的addHTML函数

我正在尝试使用jsPDF插件在我的应用程序中创建自定义打印输出。 Applicaiton使用AngularJs框架。 我尝试了许多不同的例子代码,但没有什么工作......( http://jsfiddle.net/rpaul/p4s5k59s/5/ , http://mrrio.githu
4回复

JSPDF-addHTML()多画布页面

我注意到已经有一个版本“addHTML() 现在可以将画布分成多个页面”,可以通过此链接找到: https : //github.com/MrRio/jsPDF/releases/tag/v1.0.138 。 我可以知道它是如何工作的吗? 就我而言,我只是在单击“另存为 pdf”按钮时尝试了它,它只
1回复

jspdf的方法addHTML()和fromHTML()之间有什么区别?

jspdf的方法addHTML()和fromHTML()之间有什么区别? 文档仅包含第一个的信息。
2回复

无法在jspdf中使用addHTML保存pdf文件

标题: HTML: JavaScript的: 我想在按按钮生成div #wrapper时将其添加到pdf文件中。 但是,当我按下按钮并检查Chrome中的元素时,它总是显示源中已卸载的事件。 任何帮助,将不胜感激。 谢谢!