jQuery 使用 jspdf 导出 PDF 不呈现 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25946275/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Exporting PDF with jspdf not rendering CSS
提问by Alin
I am using jspdf.debug.js to export different data from a website but there are a few problems, I can't get it to render the CSS in the exported PDF and if I have an image in the page I am exporting, the PDF returns blank...
我正在使用 jspdf.debug.js 从网站导出不同的数据，但有一些问题，我无法让它在导出的 PDF 中呈现 CSS，如果我在导出的页面中有图像， PDF 返回空白...
Does anyone know a way to fix this ?
有谁知道解决这个问题的方法？
Here is a jsfiddleshowing it's not rendering the CSS
这是一个jsfiddle，显示它没有呈现 CSS
And my script
还有我的剧本
$(document).ready(function() {
$('#export').click(function(){
var d = new Date().toISOString().slice(0, 19).replace(/-/g, ""),
filename = 'financiar_' + d + '.pdf',
pdf = new jsPDF('p', 'pt', 'letter'),
specialElementHandlers = {
'#editor': function( element, renderer ) {
return true;
}
};
pdf.fromHTML(
$('.export').get(0) // HTML element
, 25 // x coord
, 25 // y coord
, {
'width': 550 // was 7.5, max width of content on PDF
, elementHandlers: specialElementHandlers
}
);
pdf.save( filename );
})
});
回答by Mihir
As I know jsPDF is not working with CSS and the same issue I was facing.
据我所知，jsPDF 不适用于 CSS 和我面临的同样问题。
To solve this issue, I used Html2Canvas. Just Add HTML2Canvas JSand then use pdf.addHTML()instead of pdf.fromHTML().
为了解决这个问题，我使用了Html2Canvas。只需添加HTML2Canvas JS，然后用pdf.addHTML()替代pdf.fromHTML()。
Here's my code (no other code):
这是我的代码（没有其他代码）：
var pdf = new jsPDF('p', 'pt', 'letter');
pdf.addHTML($('#ElementYouWantToConvertToPdf')[0], function () {
pdf.save('Test.pdf');
});
Best of Luck!
祝你好运！
Edit:Refer to this linein case you didn't find .addHTML()
编辑：如果您没有找到，请参阅此行.addHTML()
回答by Bhinal Chauhan
jspdf does not work with css but it can work along with html2canvas. You can use jspdf along with html2canvas.
jspdf 不适用于 css，但它可以与 html2canvas 一起使用。您可以将 jspdf 与 html2canvas 一起使用。
include these two files in script on your page :
在页面上的脚本中包含这两个文件：
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript" src="jspdf.min.js"></script>
<script type="text/javascript">
function genPDF()
{
html2canvas(document.body,{
onrendered:function(canvas){
var img=canvas.toDataURL("image/png");
var doc = new jsPDF();
doc.addImage(img,'JPEG',20,20);
doc.save('test.pdf');
}
});
}
</script>
You need to download script files such as https://github.com/niklasvh/html2canvas/releaseshttps://cdnjs.com/libraries/jspdf
需要下载https://github.com/niklasvh/html2canvas/releases等脚本文件 https://cdnjs.com/libraries/jspdf
make clickable button on page so that it will generate pdf and it will be seen same as that of original html page.
在页面上制作可点击的按钮，以便它生成 pdf 并且将看到与原始 html 页面相同的按钮。
<a href="javascript:genPDF()">Download PDF</a>
It will work perfectly.
它会完美地工作。
回答by user3180664
Slight change to @rejesh-yadav wonderful answer.
对@rejesh-yadav 精彩答案略有改动。
html2canvas now returns a promise.
html2canvas 现在返回一个承诺。
html2canvas(document.body).then(function (canvas) {
var img = canvas.toDataURL("image/png");
var doc = new jsPDF();
doc.addImage(img, 'JPEG', 10, 10);
doc.save('test.pdf');
});
Hope this helps some!
希望这对一些人有所帮助！
回答by rajesh yadav
You can get the example of css implemented html to pdf conversion using jspdf on following link: JSFiddle Link
您可以在以下链接上使用 jspdf 获取 css 实现的 html 到 pdf 转换的示例： JSFiddle Link
This is sample code for the jspdf html to pdf download.
这是 jspdf html 到 pdf 下载的示例代码。
$('#print-btn').click(() => {
var pdf = new jsPDF('p','pt','a4');
pdf.addHTML(document.body,function() {
pdf.save('web.pdf');
});
})
回答by JCristobal
To remove black background only add background-color: white; to the style of
要删除黑色背景，只需添加 background-color: white; 到风格
