【发布时间】：2013-12-25 22:29:46
【问题描述】：
我是使用 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>
【问题讨论】：
-
您的控制台是否出现任何错误？ IE。 - 您的所有资源都正确加载了吗？ .我问的原因是，在我的开发人员环境中：“//ajax.googleapis.com”给我带来了麻烦，而“h t t p : //ajax.googleapis.com”却没有。至此：你能告诉我更多关于你的开发堆栈的信息吗？页面如何呈现 WAMP、MAMP、RoRails、Node？不知道这是否太重要了，但谁知道——我希望看到这个问题得到回答。
-
一切都在加载，只是一个简单的 .html 文件，
-
我认为我们需要您的所有代码，或者您可以将其上传到某个地方？因为当我使用您提供的代码时，样式效果很好。
-
添加了完整的网页，几乎没有什么不同。
标签： javascript css pdf-generation jspdf