javascript - examples - jsPDF no puede hacer funcionar ningún estilo
jspdf lib js (3)
Puede capturar una captura de pantalla con jsPDF, pero también necesitará html2canvas. Use html2canvas para convertir el html a canvas y tomar el contenido de la imagen. Cree un pdf vacío con jsPDF y agregue el contenido de la imagen html en el pdf y guárdelo:
html2canvas(*html*, {
onrendered: function(canvas) {
const contentDataURL = canvas.toDataURL(''image/png'')
let pdf = new jsPDF()
pdf.addImage(contentDataURL, ''JPEG'', 20, 20)
pdf.save(''form.pdf'')
}
})
Esto retendrá todo el CSS pero la calidad sufrirá un poco (borrosa).
¡Soy nuevo en el uso de jsPDF pero, por mi vida, no puedo obtener ningún CSS para aplicar a esto! ¡He intentado en línea, interno y externo, todo en vano! Leí en otra publicación de SO que dado que está técnicamente imprimiendo cosas en un archivo, necesito una hoja de estilo de impresión, y eso tampoco funcionó.
Tengo una página muy básica con la que estoy tratando de hacer funcionar cualquier 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>
Y finalmente la hoja de estilo que es externa:
h1{
color: red;
}
div{
color: red;
}
Estoy seguro de que todo se está incluyendo correctamente, y que no hay errores, ya se ha verificado todo eso. ¿Hay alguna función adicional que deba llamar para que el CSS funcione también? ¡Por favor házmelo saber! ¡Muchas gracias! ¡Cualquier otro consejo que pueda tener también es apreciado!
EDITAR: Esta es la página web exacta:
<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>
puede probar this opción, que usa las bibliotecas jsPDF, html2canvas y html2pdf
de su README:
incluir estos archivos:
<script src="jspdf.min.js"></script>
<script src="html2canvas.min.js"></script>
<script src="html2pdf.js"></script>
y luego puedes generar tu pdf ejecutando:
html2pdf($(''body'').get(0), {
margin: 1,
filename: ''myfile.pdf'',
image: { type: ''jpeg'', quality: 0.98 },
html2canvas: { dpi: 192, letterRendering: true },
jsPDF: { unit: ''in'', format: ''letter'', orientation: ''portrait'' }
});
Creo que el problema es que usas media="print" lugar de media="screen" .Intente hacer dos archivos separados, uno para imprimir y otro para la pantalla:
<link rel="stylesheet" href="print.css" type="text/css" media="print"/>
<link rel="stylesheet" href="screen.css" type="text/css" media="screen"/>
La pantalla uno contendrá el estilo de la página como se ve en un navegador. La versión impresa contendrá el estilo para cuando imprima su página o, en este caso, la guarde como un PDF.
EDITAR
Revisé el sitio web jsPDF, pero creo que no son compatibles con CSS. Podría hacer algo como esto para crear un documento con diferentes colores de texto:
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.'');
Coloque este código justo bajo var doc = new jsPDF(''landscape''); en tu script