sam*_*oul 35 javascript css pdf-generation jspdf
我是新手使用jsPDF但是对于我的生活我无法获得任何css来应用这个东西!我尝试过内联,内部和外部都无济于事!我在另一篇SO帖子中读到,因为它在技术上将文件打印到文件中,所以我需要一个打印样式表,但这也不起作用.
我有一个非常基本的页面,我只是想让任何CSS使用:JS:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jspdf.js"></script>
<script type="text/javascript" src="./libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="./libs/Blob.js/BlobBuilder.js"></script>
<script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jspdf.plugin.from_html.js"></script>
<script>
$(document).ready(function(){
$('#dl').click(function(){
var specialElementHandlers = {
'#editor': function(element, renderer){
return true;
}
};
var doc = new jsPDF('landscape');
doc.fromHTML($('body').get(0), 15, 15, {'width': 170, 'elementHandlers': specialElementHandlers});
doc.output('save');
});
});
</script>
HTML:
<body>
<div id="dl">Download Maybe?</div>
<div id="testcase">
<h1>
We support special element handlers. Register them with jQuery-style
</h1>
</div>
</body>
最后是外部的样式表:
h1{
color: red;
}
div{
color: red;
}
我确信所有内容都被正确包含,并且没有错误,已经检查了所有这些.是否有一些额外的功能我需要调用以使CSS工作？请告诉我!非常感谢!您可能拥有的任何其他提示也不胜感激!
编辑:这是确切的网页:
<html>
<head>
<link rel="stylesheet" href="print.css" type="text/css" media="print"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jspdf.js"></script>
<script type="text/javascript" src="./libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="./libs/Blob.js/BlobBuilder.js"></script>
<script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jspdf.plugin.from_html.js"></script>
<script>
$(document).ready(function(){
$('#dl').click(function(){
var specialElementHandlers = {
'#editor': function(element, renderer){
return true;
}
};
var doc = new jsPDF('landscape');
doc.fromHTML($('body').get(0), 15, 15, {'width': 170, 'elementHandlers': specialElementHandlers});
doc.output('save');
});
});
</script>
</head>
<body>
<div id="dl">Download Maybe?</div>
<div id="testcase">
<h1>
We support special element handlers. Register them with jQuery-style
</h1>
</div>
</body>
</html>
Jar*_*rno 23
我认为问题在于你用media="print"而不是media="screen".尝试制作两个单独的文件,一个用于打印,一个用于屏幕:
<link rel="stylesheet" href="print.css" type="text/css" media="print"/>
<link rel="stylesheet" href="screen.css" type="text/css" media="screen"/>
屏幕一个将包含浏览器中显示的页面样式.打印页面将包含打印页面时的样式,或者在此情况下将其另存为PDF.
编辑
我检查了jsPDF网站,但我认为他们不支持CSS.您可以执行以下操作来创建具有不同文本颜色的文档:
doc.setFontSize(22);
doc.setTextColor(255, 0, 0);
doc.text(20, 20, 'This is a title');
doc.setFontSize(16);
doc.setTextColor(0, 255, 0);
doc.text(20, 30, 'This is some normal sized text underneath.');
将此代码放在var doc = new jsPDF('landscape');脚本中.
你可以试试这个选项，它使用 jsPDF、html2canvas 和 html2pdf 库
从它的自述文件：
包括这个文件：
<script src="jspdf.min.js"></script>
<script src="html2canvas.min.js"></script>
<script src="html2pdf.js"></script>
然后你可以通过运行生成你的pdf：
html2pdf($('body').get(0), {
margin: 1,
filename: 'myfile.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { dpi: 192, letterRendering: true },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
});
| 归档时间： |
|
| 查看次数： |
45563 次 |
| 最近记录： |