javascript - tabla - ¿Cómo generar un pdf desde la página web html?

obtener datos de una tabla html javascript

Question

Estoy buscando una biblioteca para transformar mi página web en un archivo PDF después de hacer clic en el evento desde un botón. Estoy probando jspdf , pero se imprime sin el CSS, ¿cómo puedo hacer esto usando JavaScript/jQuery y mantener mi CSS? ¿O otro CSS que puedo elegir?

Answer 1

Existe una nueva solución en la nube de jQuery + que representará cualquier página HTML y su CSS (incluidas las reglas de los medios impresos) en PDF. La solución está configurada para imprimir cualquier región de su página web, simplemente le dice al Formateador qué elemento contenedor desea imprimir y la biblioteca hace el resto. Lo que obtienes es un PDF incrustable o el backend hará retroceder un PDF para descargarlo.

Aquí está tu biblioteca (GitHub):
https://github.com/Xportability/css-to-pdf

Aquí está tu violín:
http://jsfiddle.net/kstubs/jrtM5/

Aquí hay una demostración de trabajo:
xep.cloudformatter.com/doc

Actualmente no hay instrucciones de uso, pero seguir las muestras (ver fuente) debe explicarse por sí mismo (busque los botones Imprimir) y aquí están, más o menos, las opciones / parámetros adicionales que el método de Formato entiende.

options 
{
    pageWidth: "8.5in",             
    pageHeight: "11in", 
    pageMargin: ".25in", 
    pageMarginTop: "1in",
    pageMarginRight: "1in",
    pageMarginBottom: "1in",
    pageMarginLeft: "1in",
    render: ("none"|"newwin<default>"|embed"|"download<default IE>"),
    foStyle: { 
        // puts fo style attributes on the root, ex. fontSize:14px
        foStyleName: ''value'', ...
    }           
}

Aquí está la lista de los atributos de CSS que son compatibles actualmente.

[
    ''lineHeight'', 
    ''alignmentBaseline'', 
    ''backgroundImage'', ''backgroundPosition'', ''backgroundRepeat'', ''backgroundColor'',
    ''baselineShift'', 
    ''border'',
    ''borderWidth'', ''borderColor'',''borderStyle'',
    ''borderTop'',''borderLeft'',''borderRight'',''borderBotttom'',
    ''borderTopWidth'',''borderTopStyle'',''borderTopColor'', 
    ''borderBottomWidth'',''borderBottomStyle'',''borderBottomColor'',
    ''borderLeftWidth'',''borderLeftStyle'',''borderLeftColor'',
    ''borderRightWidth'',''borderRightStyle'',''borderRightColor'',
    ''borderCollapse'',             
    ''clear'', ''color'', 
    ''display'', ''direction'', ''dominantBaseline'', 
    ''fill'', ''float'', 
    ''fontStyle'', ''fontVariant'', ''fontWeight'', ''fontSize'', ''fontFamily'', 
    ''listStyleType'', ''listStyleImage'', ''letterSpacing'', 
    ''marginTop'', ''marginBottom'', ''marginLeft'', ''marginRight'',''orphans'', 
    ''paddingTop'', ''paddingRight'', ''paddingBottom'', ''paddingLeft'',
    ''pageBreakAfter'', ''pageBreakBefore'', 
    ''tableLayout'', 
    ''textAlign'', ''textAnchor'',''textDecoration'', ''textIndent'', ''textTransform'', 
    ''verticalAlign'',
    ''widows'', ''wordSpacing'', ''width''
]

¡Espero que esto ayude!

Answer 2

He creado una API simple y muy fácil de usar que utiliza la biblioteca snappy , basada en la wkhtmltopdf basada en webkit wkhtmltopdf , para convertir una página HTML de la URL a PDF. Aquí está el repositorio de Github: https://github.com/Dellos7/dhtml2pdf

Este es un ejemplo de cómo usarlo desde una etiqueta de anclaje. Esto mostrará el PDF generado del sitio https://www.github.com en una nueva pestaña del navegador:

<a href="https://dhtml2pdf.herokuapp.com/api.php?url=https://www.github.com&result_type=show" target="_blank">Show PDF</a>

Ejemplo de cómo usarlo para descargar el PDF:

<a href="https://dhtml2pdf.herokuapp.com/api.php?url=https://www.github.com&result_type=download&file_name=my_pdf">Download PDF</a>

Con esta solución, ni siquiera necesita usar javascript para generar su PDF.

Pero si aún necesitas hacerlo usando javascript, puedes hacerlo así:

document.getElementById("your-button-id").addEventListener("click", function() {
    var link = document.createElement(''a'');
    link.href = ''https://dhtml2pdf.herokuapp.com/api.php?url=https://www.github.com&result_type=download'';
    link.download = ''file.pdf'';
    link.dispatchEvent(new MouseEvent(''click''));
});

En el repositorio también te explico cómo clonar y desplegar fácilmente tu propia API en Heroku para que puedas mantener la API por tu cuenta y no depender de servicios externos.

Answer 3

prueba este paquete htmlto . Crea PDF a partir de html con estilo CSS

var htmlTo = require(''htmlto'')

htmlTo.pdf(''./public/html/report.html'',''./public/pdf/report.pdf'',{width: 2480, height: 3508})

instalar:

npm install -S htmlto

npm install -S phantom

* También puede especificar la versión dimension.phantom ^ 4.0.3 y la versión de nodo v6.5.0 https://www.npmjs.com/package/htmlto