Buenas tardes. En mi saga en curso al usar jsPDF, html2canvas y ahora html2pdf para capturar un elemento div para exportar el contenido html como PDF, tengo algunos problemas en 3 frentes.
¿Cómo aumento la calidad del texto? Está algo borroso y me gustaría que el texto y la imagen del informe fueran algo más nítidos.
¿Hay alguna forma de usar la función .html() de jsPDF en lugar de guardar el contenido como una imagen en el archivo PDF?
¿Hay una mejor manera de esto? Esta característica ha sido un dolor de cabeza total. Lo loco, en la aplicación web real, tengo un botón de impresión que formatea muy bien el html, obtengo la ventana de impresión y se guarda muy bien como PDF. Lamentablemente, a muchos usuarios no les gusta el paso adicional y prefieren simplemente descargar.
Nota: estoy usando la versión actual de html2pdf.js para la funcionalidad de salto de página en la que estoy trabajando. El siguiente código aún no está configurado para incorporar la capacidad de salto de página.
Aquí está mi código:
HTML:
<div class="modal-body" id="printItems"> <div class="container" id="selectedItems"></div> </div> <button stule="border:none"><span id="downloadActivity" class="glyphicon glyphicon-download-alt" title="download report to PDF" onclick="downloadToPDF()"</span></button> <script type="text/javascript" src="/library/html2pdf.bundle.js"></script>JavaScript:
function downloadPDF() { var opt = { margin:1, filename: webPage + dateStamp + '.pdf', quality: 0.95, image: {type: 'jpeg', quality:4}, html2canvas: { dpi:100, useCORS: true, letterRendering: true, width: 205, scale: 0.26, getContext: '2d' }, jsPDF: {unit: 'in', format: 'a4', orientation: 'portrait} }; html2pdf().from(element).ser(opt).toPdf().get('pdf').then(function(pdf){ pdf.setFontSize(9) pdf.text(JSON.parse(localStorage.getItem('classKey')), 75, 1, {baseline: 'top' }); }).save() }