jsPDF kann kein Styling zum Laufen bringen

Question

Dec 08, 2013, 11:31 PM

jsPDF kann kein Styling zum Laufen bringen

Ich bin neu in der Verwendung von jsPDF, aber für mein ganzes Leben kann ich kein CSS bekommen, das sich auf dieses Ding bezieht! Ich habe versucht, inline, intern und extern alles ohne Erfolg! Ich habe in einem anderen SO-Post gelesen, dass ich, da es technisch gesehen darum geht, Dinge in eine Datei zu drucken, ein Druck-Stylesheet brauche, und das hat auch nicht funktioniert.

Ich habe eine sehr einfache Seite, mit der ich nur versuche, CSS zum Laufen zu bringen: 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>

Und schließlich das Stylesheet, das extern ist:

h1{
    color: red;
}
div{
    color: red;
}

Ich bin sicher, dass alles korrekt aufgenommen wird und dass es keine Fehler gibt, das alles wurde bereits überprüft. Gibt es eine zusätzliche Funktion, die ich aufrufen muss, damit das CSS auch funktioniert? Lass es mich bitte wissen! Danke vielmals! Alle anderen Tipps, die Sie möglicherweise haben, werden auch geschätzt!

EDIT: Dies ist die genaue Webseite:

<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>