Sono nuovo nell'usare jsPDF ma e per la vita di me non riesco a ottenere alcun css da applicare a questa cosa! Ho provato in linea, interno ed esterno tutto inutilmente! Ho letto in un altro post SO che, dal momento che tecnicamente sta stampando materiale su un file, ho bisogno di un foglio di stile di stampa, e anche questo non ha funzionato.jsPDF non riesce a far funzionare nessuno stile
Ho una pagina molto semplice che sto solo cercando di ottenere qualsiasi CSS per lavorare con: 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>
E infine il foglio di stile che è esterno :
h1{
color: red;
}
div{
color: red;
}
Sono sicuro che tutto viene incluso correttamente e che ci sono n o errori, già controllato tutto ciò. C'è qualche funzione in più che devo chiamare per far funzionare anche il css? Fammi sapere per favore! Molte grazie! Anche altri suggerimenti che potresti avere sono apprezzati!
EDIT: Questa è la pagina web esatto:
<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>
Si verificano errori nella console? Vale a dire. - tutte le risorse vengono caricate correttamente? . Il motivo per cui lo chiedo è perché, nel mio ambiente di sviluppo: "//ajax.googleapis.com" mi dà problemi in cui "h t t p: //ajax.googleapis.com" non lo fa. A quel punto: potresti dirmi di più sul tuo stack di sviluppo, ad es. come vengono visualizzate le pagine WAMP, MAMP, RoRails, Node? Non sono sicuro se tutto ciò sia troppo importante, ma chissà ... mi piacerebbe vedere la risposta a questa domanda. – sdailey
Tutto viene caricato, è solo un semplice file .html, – samuraiseoul
Penso che abbiamo bisogno di tutto il tuo codice, o forse puoi caricarlo da qualche parte? Perché quando uso il codice che hai fornito lo stile funziona bene. – Jarno