jsPDF can't get any styling to work
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.
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>
And finally the stylesheet that is external:
h1{
color: red;
}
div{
color: red;
}
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!
EDIT: 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>
Answer
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"/>
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.