blocks|key|1699034|text|也许您可以尝试html2canvas(它将解析DOM，计算应用的样式)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1699035|(function(){
var+
+form+=+$('.form'),
+cache_width+=+form.width(),
+a4++=[+595.28,++841.89];++//+for+a4+size+paper+width+and+height

$('#create_pdf').on('click',function(){
+$('body').scrollTop(0);
+createPDF();
});
//create+pdf
function+createPDF(){
+getCanvas().then(function(canvas){
++var+
++img+=+canvas.toDataURL("image/png"),
++doc+=+new+jsPDF({
++++++++++unit:'px',+
++++++++++format:'a4'
++++++++});+++++
++++++++doc.addImage(img,+'JPEG',+20,+20);
++++++++doc.save('techumber-html-to-pdf.pdf');
++++++++form.width(cache_width);
+});
}

//+create+canvas+object
function+getCanvas(){
+form.width((a4[0]*1.33333)+-80).css('max-width','none');
+return+html2canvas(form,{
+++++imageTimeout:2000,
+++++removeContainer:true
++++});+
}

}());|code-block|syntax|javascript|1699036|我找到了这个这里。如果您需要更多的信息，请查看链接。|offset|length|1699037|entityMap|0|LINK|mutability|MUTABLE|url|http://www.techumber.com/2015/04/html-to-pdf-conversion-using-javascript.html^0|0|0|6|2|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

May be you can try html2canvas(It will parse the DOM, Calculate the styles applied).

<pre><code>(function(){
var 
 form = $('.form'),
 cache_width = form.width(),
 a4 =[ 595.28, 841.89]; // for a4 size paper width and height

$('#create_pdf').on('click',function(){
 $('body').scrollTop(0);
 createPDF();
});
//create pdf
function createPDF(){
 getCanvas().then(function(canvas){
 var 
 img = canvas.toDataURL("image/png"),
 doc = new jsPDF({
 unit:'px', 
 format:'a4'
 }); 
 doc.addImage(img, 'JPEG', 20, 20);
 doc.save('techumber-html-to-pdf.pdf');
 form.width(cache_width);
 });
}

// create canvas object
function getCanvas(){
 form.width((a4[0]*1.33333) -80).css('max-width','none');
 return html2canvas(form,{
 imageTimeout:2000,
 removeContainer:true
 }); 
}

}());
</code></pre>

I found this <a href="http://www.techumber.com/2015/04/html-to-pdf-conversion-using-javascript.html" rel="nofollow">here</a>. Please check the link if you want more info.

blocks|key|876336|text|当前版本允许获取pdf的斑点或阵列缓冲器。您唯一需要做的就是从库的0.9更新到1.2.x，然后像这样调用保存|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|876337|var+myBlob;

$('#cmd').click(function+()+{
++++doc.fromHTML($('#content').html(),+15,+15,+{
++++++++'width':+170,
++++++++++++'elementHandlers':+specialElementHandlers
++++});
++++myBlob+=+doc.save('blob');
});|code-block|syntax|javascript|876338|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/MrRio/jsPDF/blob/master/jspdf.js#L970|1|https://github.com/MrRio/jsPDF/blob/master/jspdf.js#L968^0|C|2|0|F|5|1|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]|$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]|Q|$5|L|M|N|C|$O|R]]]]

The current version allows to get the <a href="https://github.com/MrRio/jsPDF/blob/master/jspdf.js#L970" rel="nofollow">blob</a> or the <a href="https://github.com/MrRio/jsPDF/blob/master/jspdf.js#L968" rel="nofollow">arraybuffer</a> of the pdf. The only thing you have to do is to update from 0.9 to 1.2.x of the library and call save like this

<pre><code>var myBlob;

$('#cmd').click(function () {
 doc.fromHTML($('#content').html(), 15, 15, {
 'width': 170,
 'elementHandlers': specialElementHandlers
 });
 myBlob = doc.save('blob');
});
</code></pre>

blocks|key|1699079|text|您似乎正在尝试将表数据打印到PDF+Format.So中，您可以使用DataTables+jQuery插件。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1699080|数据提供了按钮库，您可以在其中使用PDF按钮。它既支持HTML5和Flash，又支持按钮类型，自动在Flash和HTML按钮选项之间进行选择。|style|CODE|1699081|$('#myTable').DataTable(+{
buttons:+[
++++'pdf'
]
}+);|code-block|syntax|javascript|1699082|它也提供excel导出功能，您只需添加excel按钮即可。|1699083|$('#myTable').DataTable(+{
buttons:+[
++++'copy',+'excel',+'pdf'
]
}+);|1699084|我已经使用在我们的应用程序，它将不会使任何冲突的引导。|1699085|entityMap|0|LINK|mutability|MUTABLE|url|https://datatables.net/|1|https://datatables.net/extensions/buttons/^0|Y|A|0|0|H|3|5|2|1|0|0|J|5|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@$A|17|B|18|F|G]]|9|@$A|19|B|1A|1|1B]]|C|$]]|$1|H|3|I|5|J|7|1C|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1D|8|@$A|1E|B|1F|F|G]]|9|@]|C|$]]|$1|O|3|P|5|J|7|1G|8|@]|9|@]|C|$K|L]]|$1|Q|3|R|5|6|7|1H|8|@]|9|@]|C|$]]|$1|S|3|-4|5|6|7|1I|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]|10|$5|V|W|X|C|$Y|11]]]]

It seems you are trying to print table data into PDF Format.So you can use <a href="https://datatables.net/" rel="nofollow">DataTables</a> jQuery Plugin.

Datatables provide <a href="https://datatables.net/extensions/buttons/" rel="nofollow">button</a> library in which you can use <code>PDF</code> button.
Its support both HTML5 and Flash and button type automatically select between the Flash and HTML button options.

<pre><code>$('#myTable').DataTable( {
buttons: [
 'pdf'
]
} );
</code></pre>

Its provide excel export feature too, you just need to add <code>excel</code> button.

<pre><code>$('#myTable').DataTable( {
buttons: [
 'copy', 'excel', 'pdf'
]
} );
</code></pre>

I have already used in our application it will not make any conflict with bootstrap.

blocks|key|1699100|text|尝试jsPDF-AutoTable+(jsPDF插件)，这可能会帮助您从HTML转换成PDF格式。查看演示|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1699101|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/simonbengtsson/jsPDF-AutoTable|1|https://simonbengtsson.github.io/jsPDF-AutoTable/^0|2|P|0|1F|2|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

Try <a href="https://github.com/simonbengtsson/jsPDF-AutoTable" rel="nofollow">jsPDF-AutoTable (jsPDF plugin)</a>, this may help you to convert to PDF from HTML as you want. Check out the <a href="https://simonbengtsson.github.io/jsPDF-AutoTable/" rel="nofollow">demo</a>

I would like to get the HTML page in the PDF.

After some studies I found the pdfJS plugin, it has some problem with bootstrap , the layout will be messy

<a href="http://jsfiddle.net/5ud8jkvf/" rel="noreferrer">http://jsfiddle.net/5ud8jkvf/</a>

here is the fiddle

I found the default print as PDF result is great 

<a href="https://i.stack.imgur.com/4rl3r.png" rel="noreferrer"><img src="https://i.stack.imgur.com/4rl3r.png" alt="enter image description here"></a>

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

So , instead of fixing the problem for pdfJS, I wonder are there html / jquery way to get the pdf from the print as pdf.

The HTML need to convert to PDF is one page application form only, thanks a lot

How to get the print as PDF result using jquery

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想在PDF中得到HTML页面。经过一些研究，我发现了pdfJS插件，它有一些问题，引导，布局将是混乱的。这是小提琴我发现作为PDF结果的默认打印很好。​​var doc = new jsPDF();var specialElementHandlers = {    '#editor': function (eleme...

问如何使用jquery获得PDF格式的打印结果
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jquery获得PDF格式的打印结果EN