Quiero hacer una función para exportar PDF en la web. Descubrí que JSPDF es recomendado por muchas personas. Desafortunadamente, no es compatible con el chino. Finalmente, encontré pdfmake, que resolvió bien este problema. Su efecto se puede ver primero en http://pdfmake.org/playground.html. Durante el uso, también se descubrió que insertar imágenes era algo relativamente engorroso.
En respuesta a estos problemas, el contenido principal de este artículo se puede dividir en tres partes:
• Método de uso básico de PDFMake;
• Cómo resolver problemas chinos;
• Cómo insertar imágenes especificando la dirección de la imagen.
Método de uso básico de PDFMake
1. Contiene los siguientes dos archivos
<script src = "build/pdfmake.min.js"> </script> <script src = "build/vfs_fonts.js"> </script>
2. Declare un objeto de definición de documento en el código JS, que es el propio término de PDFMake. En pocas palabras, es crear un objeto que contenga al menos el atributo de contenido. Luego puede llamar al método PDFMake para exportar el PDF, consulte el siguiente código:
<script type = "text/javaScript"> // Crear objeto de definición de documento var dd = {content: ['un párrafo', 'Otro párrafo, esta vez un poco más para asegurarse, esta línea se dividirá en al menos dos líneas']}; // Exportar PDF PDFMake.CreatePDF (DD) .download (); </script>Siga el ejemplo anterior y verá el archivo de solicitud que se descargará. Para obtener un tutorial completo sobre PDFMake, inicie sesión en el proyecto PDFMake para verlo.
PDFMake apoya a los chinos
Tres pasos:
1. Vaya al sitio web del Proyecto PDFMake, descargue todos los proyectos, luego ingrese el directorio del proyecto y coloque el archivo de fuentes (como Microsoft Yahei.ttf) en el directorio de ejemplos/fuentes, y luego use Grunt Dump_dir para generar un nuevo archivo VFS_FONTS.JS;
De la descripción anterior, podemos ver que el proyecto se administra a través de Grunt. Si no hay un conocimiento relevante, con vaya y tome una tutoría primero.
El comando Grunt Dump_dir empaquetará todos los archivos en el directorio de fuentes, por lo que no ponga archivos inútiles en él.
Microsoft yaheii.ttf busca en línea, y el directorio donde las fuentes se almacenan en el disco del sistema informático de Windows también se pueden encontrar.
2. Vuelva a su propio código de ejemplo, modifique el objeto Fonts de PDFMake en el código JS y declare que la fuente que desea usar:
pdfmake.fonts = {roboTo: {normal: 'roboTo-regular.ttf', bold: 'roboto-medium.ttf', italics: 'roboto-italic.ttf', boldtalics: 'roboTo-italic.ttf', boldtalics: 'roboto-italic.ttf'}, Microsofte: {normal: Yahei.ttf ', Bold:' Microsoft yahei.ttf ', cursiva:' Microsoft Yahei.ttf ',}};3. Declarar la fuente que se utilizará de forma predeterminada en el objeto de definición de documento. Específicamente: es declarar un objeto. Además del atributo de contenido, también necesita un atributo de estilo predeterminado. Hay otro atributo de fuente bajo el estilo predeterminado:
var dd = {content: ['prueba china e inglesa', 'Otro párrafo, esta vez un poco más tiempo para asegurarse de que esta línea se dividirá en al menos dos líneas'], defaultStyle: {Font: 'Microsoft Yahei'}};El siguiente es un código fuente de ejemplo completo basado en los pasos anteriores:
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> mi primera exportación pdf </title> <script src = "build/pdfmake.min.js"> </script> <script src = "construye/vfs_fonts.js"> <//<///<//script> <script (> {script) {Contenido: ['Prueba china e inglesa', 'Otro párrafo, esta vez un poco más para asegurarse, esta línea se dividirá en al menos dos líneas'], defaultStyle: {Font: 'Microsoft Yahei'}}; pdfmake.fonts = {roboTo: {normal: 'roboTo-regular.ttf', bold: 'roboto-medium.ttf', italics: 'roboto-italic.ttf', Boldalics: 'roboTo-italic.ttf', Boldalics: 'roboTo-italic.ttf',}}; pdfmake.createPDF (dd) .download (); } </script> </head> <body> <button onClick = "down ()"> Descargar </boton> </body> </html>Insertar una imagen
In terms of inserting images, jsPDF requires the image to be converted into Data URL first, and pdfmake allows direct paths to be specified, which seems very convenient, but this is conditional, and it must be used as a server, or put the image in vfs_fonts.js, so in general, it is not very useful, so you still have to convert the image to Data URL form.
Para resolver este problema, escribí un objeto de función de iMagedAtaurl que puede pasar en múltiples direcciones de imagen al mismo tiempo. Después de que se cargan todas las imágenes, se activará iMagedAtaurl.oncomplete. La URL de datos de cada imagen se saca a través de esto. Imgdata en la devolución de llamada. El PDF se puede generar correctamente de acuerdo con los requisitos de PDFMake.
El principio de iMagedAtaurl es dibujar la imagen en la etiqueta de lienzo de H5, y luego obtener la URL de datos de la imagen a través del Todataurl del lienzo. Preste atención a los problemas de compatibilidad del navegador cuando lo use.
El siguiente es un ejemplo de escritura sampleimage.jpg, sampleage.jpg, sampleImage.jpg a PDF en secuencia. Sampleage.jpg no existe durante la prueba, y el PDF se ignora directamente.
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> mi segunda exportación PDF </title> <script src = "build/pdfmake.min.js"> </script> <script src = "construye/vfs_fonts.js"> <///<//script> </script> IMagedAtaurl (["sampleImage.jpg", "sampleImage.jpg"]); x.oncomplete = function () {var imgs = new Array (); console.log ("completo"); para (clave en this.imgdata) {if (this.imgdata [key] == this.emptyobj) // ignora las imágenes inexistentes; imgs.push ({imagen: this.imgdata [key]}); // formato de imagen de pdfmake {imagen: imagen dataUrl}} var dd = {content: ['title', imgs,],}; pdfmake.createPDF (dd) .download (); }} </script> </head> <body> <button onClick = "down ()"> Descargar </boton> <script> function iMagedAtaurl (urls) {// urls debe ser una cadena o una matriz de cadenas este.completenum = 0; this.totalnum = 0; this.imgData = new Array (); this.emptyobj = new Object (); this.oncomplete = function () {}; this.getDataurl = function (url, index) {var c = document.createElement ("Canvas"); var cxt = c.getContext ("2d"); var img = nueva imagen (); var dataUrl; var p; p = esto; img.src = url; img.onload = function () {var i; var maxwidth = 500; escala var = 1.0; if (img.width> maxwidth) {escala = maxwidth / img.width; C.Width = maxwidth; C.Height = Math.Floor (IMG.Height * escala); } else {c.width = img.width; C.Height = img.Height; } cxt.DrawImage (img, 0, 0, C.Width, C.Height); p.imgdata [index] = c.todataurl ('image/jpeg'); para (i = 0; i <p.totalnum; ++ i) {if (p.imgdata [i] == null) break; } if (i == p.totalnum) {p.oncomplete (); }}; img.onerror = function () {p.imgdata [index] = p.emptyobj; para (i = 0; i <p.totalnum; ++ i) {if (p.imgdata [i] == null) break; } if (i == p.totalnum) {p.oncomplete (); }}; } if (urls instanceOf array) {this.totalnum = urls.length; this.imgdata = new Array (this.totalnum); para (clave en URLS) {this.getDataurl (urls [clave], clave); }} else {this.imgdata = new Array (1); this.totalnum = 1; this.getDataurl (URLS, 0); }} </script> </body> </html>El método anterior para exportar complementos PDF por JS (que admite rutas de uso chino y de imágenes) es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.