El usuario llena el formulario y hace clic para guardar, y puede descargar directamente el documento PDF.
Solución Generación de servidorIdeas
Google Chrome desarrolló su propia función Chrome sin cabeza en 2017 y lanzó Puppeteer al mismo tiempo. Se puede entender como un navegador que no tiene interfaz pero puede completar las características funcionales del servidor.
Por lo tanto, podemos iniciar el navegador Puppeteer en el servidor, abrir la URL de destino y usar la función de conversión proporcionada por el navegador Chrome para convertir HTML en PDF.
Generación de código central en el servidorPrimero, debe instalar Puppeteer. Puede haber errores en la instalación de NPM. Es mejor usar la imagen CNPM Taobao para instalarla.
Ingrese las dependencias de instalación cnpm i puppeteer -S .
Para crear un archivo JS, solo necesita abrir la URL con el navegador de Puppeteer y guardar el PDF.
// html2pdf.jsconst tuppeteer = request ('tupieteer'); (async function () {// inicia el servicio const browser = await tupieteer.launch (); // Abrir la pestaña const page = await browser.newpage (); // vaya a la dirección inhalada a espera page.goto ('https://koa.bootcss.com/#context'); Luego ingrese node html2pdf.js en la consola para iniciar el servicio.
Por supuesto, Module.Export también puede exportar el método del módulo de acuerdo con la lógica de negocios.
defecto
No se puede guardar los datos dinámicos en el formulario
Dado que es una página de solicitud desde el servidor, si la entrada del usuario no se guarda en la dirección de solicitud, el PDF recortado será el estado inicial donde la página no se ha completado.
En otras palabras, solo puede convertir páginas estáticas porque nuestras necesidades tienen mucha entrada del usuario, así que pase.
El cliente genera código centralIdeas
defecto
distorsión.
Podemos encontrar claramente que, dado que es similar a insertar la captura de pantalla en un PDF en una página, es probable que la resolución y la configuración de la página afecten la calidad de la imagen de salida.
Al mismo tiempo, debido a que es una captura de pantalla, el enlace de la página y otras funciones pueden perderse.
Corte de texto
Cuando el lienzo de lienzo es mayor que un tamaño de página de PDF, la salida se erradicará. En este momento, necesitamos determinar si el lienzo de lienzo excede el tamaño de A4. Si excede el lienzo, segmente el lienzo e insértelo en una página diferente.
El problema viene de nuevo en este momento. Dado que está dividiendo la imagen, es probable que la imagen o el texto se truncen a partir de la mitad, porque no podemos analizar la estructura del elemento interno del lienzo.
Código central
Nuestras necesidades no tienen imágenes y enlaces, por lo que el problema de distorsión tiene poco impacto en nosotros. Al mismo tiempo, nuestro formulario consta de múltiples elementos de longitud de igual duplicado, y estos elementos son muy cortos y no excederán una pieza de papel A4 (aunque esto no es riguroso, si es necesario, puede obtener el ancho y la altura del elemento DOM y cortar de acuerdo con la altura del elemento DOM).
Por lo tanto, planeo dividir directamente el lienzo de acuerdo con el elemento y guardar cada artículo en una página de papel A4.
Se deben entender varios enfoques centrales antes de comenzar:
html2canvas
// DOM es el nodo DOM que se convertirá html2canvas (dom, {backgroundColor: #ffffff, ancho: ancho, altura: altura, escala: 2, tartodín: true,}). Entonces ((Canvas) => {// Canvas es el lienzo después de la conversión exitosa})jspdf
// crear una instancia deja pdf = new JSpdf ('', 'Pt', 'A4'); // Agregue la imagen al archivo PDF // El primer parámetro es el formato de archivo (base64) que se insertará, el segundo es el formato de archivo // el tercero y el cuarto son las coordenadas en la esquina superior izquierda de la imagen, y las dos últimas son el ancho y la altura de la imagen después de insertar la pdf.addimage (imagen, 'jpeg', 10,10, altura, altura, altura); // Agregar una nueva página PDF.AddPage () // Guardar el archivo PDF PDF.Save ()lienzo
// El lienzo es la imagen que se cortará // sx, sy son las coordenadas para comenzar a recortar // swidth y sheight son el ancho y la altura del cultivo // dx y dy son las coordenadas insertadas en la imagen después de cultivar // swidth, el ancho y la altura de la imagen después de la cultura. Swidth, Sheight);
/*** @Description: Forma en el archivo PDF* @return: pdf*/onsubmit () {// Esta es la forma que quiero convertir, hay muchas tablas similares en él, dejen formar = this. $ refs.form; // Obtener el ancho y la altura del elemento deja ancho = form.getBoundingClientRect (). Ancho; LET HIEMPT = Form.getBoundingClientRect (). Altura; html2canvas (form, {backgroundColor: #ffffff, ancho: ancho, altura: altura, escala: 2, tartamento: true,}). Entonces ((Canvas) => {let pdf = new jspdf ('', 'pt', 'a4'); // realiza el corte de la imagen alquiler Canvaslist = this.splitCanvas (Canvas, this.forms.length); // atraviesa la lista de lienzo y agregue una imagen por página CanvasList.ForEach ((item, index) => {// Convertir el formato de imagen en base64 LetemImage = item.todataurl ('Image/jpeg', 1.0); // Reserve 10px Margin, Width of A4 A4 es 59595595 72-Resolution Monitor PDF.Addimage (ItemImage, 'JPEG', 10,10,575.28,575.28/item.width*item.height) pdf.save ('test.pdf'); Deje que ChunkHeight = altura/num; // la altura de cada corte, déje chunklist = []; // almacenar el lienzo de resultados para (let i = 0; i <altura; i+= chunkHeight) {// Inicializar la posición del cuadro de recorte de la caja let sx = 0, sy = i, swidth = width, sheight = chunkheight, dx = 0, dy = 0; // Crear un nodo de lienzo Permitir Canvasitem = document.createElement (lienzo); // Inicializar el tamaño del lienzo Canvasitem.Height = ChunkHeight; canvasitem.width = ancho; dejar cxt = canvasitem.getContext (2d); // Ponga la imagen recortada en el nuevo nodo de lienzo cxt.drawimage (lienzo, sx, sy, swidth, sheight, dx, dy, swidth, sheight); chunklist.push (Canvasitem); } return chunklist;}, Efecto finalLa página después de guardar el formulario
El efecto de convertir a PDF
Este es el artículo sobre la solución de implementación de Pure Client y Pure Server de HTML a PDF. Para obtener más contenido de HTML con PDF, busque artículos anteriores de Wulin.com o continúe navegando por los artículos relacionados a continuación. ¡Espero que todos apoyen a Wulin.com en el futuro!