jsPDF无法使任何样式工作 [英] jsPDF can't get any styling to work
问题描述
我刚开始使用jsPDF，但对于我的生活，我不能得到任何css适用于这个东西！我试过内联，内部和外部都无济于事！我读了另一个SO post，因为它技术上打印的东西到一个文件，我需要一个打印样式表，这也没有工作。
I'm new to using jsPDF but and for the life of me I can't get any css to apply to this thing! I've tried inline, internal, and external all to no avail! I read in another SO post that since it's technically printing stuff to a file I need a print style sheet, and that didn't work either.
我有一个非常基本的页面，我只是想让任何CSS工作：
JS：
I have a very basic page that I'm just trying to get any CSS to work with: 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工作以及？让我知道！非常感谢！您可能有任何其他提示也赞赏！
I'm sure all is getting included correctly, and that there are no errors, already checked all of that. Is there like some extra function I need to call to get the css to work as well? Let me know please! Thanks alot! Any other tips you may have are also appreciated!
编辑：
这是确切的网页：
This is the exact webpage:
<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>
推荐答案
我认为问题是你使用 media =print而不是 media =screen。
尝试创建两个单独的文件，一个用于打印，一个用于屏幕：
I think the problem is that you use media="print" instead of media="screen".
Try making two seperate files, one for print and one for the screen:
<link rel="stylesheet" href="print.css" type="text/css" media="print"/>
<link rel="stylesheet" href="screen.css" type="text/css" media="screen"/>
屏幕将包含浏览器中显示的页面样式。打印页面将包含打印页面时的样式，或者保存为PDF格式。
The screen one will contain the styling for the page as seen in a browser. The print one will contain the styling for when you print your page, or in this case saving it as a PDF.
编辑
我检查了 jsPDF网站，但我认为他们不支持CSS。你可以这样做，创建一个具有不同文本颜色的文档：
I checked the jsPDF website but I think they don't support CSS. You could do something like this to create a document with different text colors though:
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'） ;
Put this code right under var doc = new jsPDF('landscape'); in your script.
这篇关于jsPDF无法使任何样式工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
