使用jspdf导出PDF而不渲染CSS
使用jspdf导出PDF而不渲染CSS
提问于 2014-09-20 15:14:20
我正在使用jspdf.debug.js从一个网站导出不同的数据，但有一些问题，我不能让它在导出的页面中渲染CSS，如果我在我导出的页面中有一个图像，PDF返回空白…
有谁知道解决这个问题的方法吗？
这是一个jsfiddle，显示它没有呈现CSS
和我的脚本
$(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 );
})
});回答 5
Stack Overflow用户
发布于 2014-09-22 15:23:32
据我所知，jsPDF不能与CSS一起工作，这和我面临的问题是一样的。
为了解决这个问题，我使用了Html2Canvas。只需添加HTML2Canvas JS，然后使用pdf.addHTML()而不是pdf.fromHTML()。
下面是我的代码(没有其他代码)：
var pdf = new jsPDF('p', 'pt', 'letter');
pdf.addHTML($('#ElementYouWantToConvertToPdf')[0], function () {
pdf.save('Test.pdf');
});祝你好运！
编辑：如果您找不到.addHTML()，请参阅this line
Stack Overflow用户
发布于 2017-03-28 16:46:35
jspdf不能与css一起工作，但它可以与html2canvas一起工作。您可以将jspdf与html2canvas一起使用。
将这两个文件包含在页面脚本中：
<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>您需要下载脚本文件，如https://github.com/niklasvh/html2canvas/releases https://cdnjs.com/libraries/jspdf
使按钮在页面上可点击，以便它将生成pdf，它将被视为与原始html页面相同。
<a href="javascript:genPDF()">Download PDF</a> 它将完美地工作。
Stack Overflow用户
发布于 2019-07-24 23:20:26
稍微更改一下@rejesh-yadav的精彩答案。
html2canvas现在返回一个promise。
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');
});希望这能有所帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25946275
复制相关文章
相似问题
腾讯云开发者
