generar - imprimir formulario php en pdf

Generar archivo PDF desde html usando angular2/mecanografiado

Question

Quiero tomar una parte de mi plantilla HTML y convertirla a un archivo PDF para darle al usuario la opción de descargarla. (Después de que hagan clic en un botón, por ejemplo).

Encontré una biblioteca llamada jsPDF, ¿cómo usaría jsPDF en una aplicación Angular2 (RC4)?

gracias

Answer 1

como respuesta

este enlace es necesario para importar contenido jsPDF

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script> // to use jsPDF for registring pdf file

entonces en ti component.ts

haces eso

declare let jsPDF;

@Component({
    template: `
        <button
          (click)="download()">download
        </button>
        `
})

export class DocSection {


    constructor() {
    }

    public download() {

        var doc = new jsPDF();
        doc.text(20, 20, ''Hello world!'');
        doc.text(20, 30, ''This is client-side Javascript, pumping out a PDF.'');
        doc.addPage();
        doc.text(20, 20, ''Do you like that?'');

        // Save the PDF
        doc.save(''Test.pdf'');
    }

}

Answer 2

Si desea usarlo en producción, definitivamente no desea depender de un enlace de Internet al que se haga referencia en su index.html, como lo propuso @khalil_diouri.

Entonces, para usarlo correctamente en un entorno Angular2 / Typescript, primero instálelo desde npm

npm install --save jspdf

Si está utilizando SystemJS, asócielo en su archivo de configuración

map: {
    "jspdf": "node_modules/jspdf/dist/jspdf.min.js"
}

Instalar archivos de definición:

typings install dt~jspdf --global --save

Y, finalmente, importarlo en su archivo component.ts

import jsPDF from ''jspdf''
...
    let doc = new jsPDF();
    doc.text(20,20,''Hello world'');
    doc.save(''Test.pdf'');
...

Answer 3

el método AddHtml está en desuso:

Fuente: plugins / addhtml.js, línea 12 Obsoleto: se reemplaza con una API que admite vectores. mira aquí

Renderiza un elemento HTML al objeto canvas que se agregó al PDF

Esta función requiere html2canvas o rasterizeHTML

Answer 4

¿Por qué usar archivos de Definición (también conocidos como Declaración)?

Para utilizar bibliotecas javascript externas (jsPDF, por ejemplo) con aplicaciones Angular2 (que usan Typescript), va a querer archivos de definición de tipo para esas bibliotecas javascript. Estos archivos proporcionan información de tipo (como en String , Number , boolean , etc.) a mecanografiado para obtener ayuda con la comprobación del tipo de tiempo de compilación. (Dado que javascript está escrito a máquina)

Otra explicación sobre los archivos d.ts se puede encontrar aquí .

Cómo utilizar

Puede descargar un paquete npm llamado typings que ayudará a agilizar el proceso. Aquí hay una breve guía sobre cómo usarlo. Una vez que haya instalado typings, puede ejecutar:

npm run -- typings install dt~jspdf --global --save

para obtener el archivo de typings que luego puede usar en su proyecto.