Generando archivos PDF con JavaScript


268

Estoy tratando de convertir datos XML en archivos PDF desde una página web y esperaba poder hacerlo completamente dentro de JavaScript. Necesito poder dibujar texto, imágenes y formas simples. Me encantaría poder hacer esto completamente en el navegador.

Respuestas:


446

Acabo de escribir una biblioteca llamada jsPDF que genera archivos PDF usando Javascript solo. Todavía es muy joven, y pronto agregaré funciones y correcciones de errores. También obtuve algunas ideas para soluciones alternativas en navegadores que no admiten URI de datos. Está licenciado bajo una licencia liberal de MIT.

Me encontré con esta pregunta antes de comenzar a escribirla y pensé en volver y avisarte :)

Generar archivos PDF en Javascript

Ejemplo: crea un archivo PDF "Hello World".

// Default export is a4 paper, portrait, using milimeters for units
var doc = new jsPDF()

doc.text('Hello world!', 10, 10)
doc.save('a4.pdf')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"></script>


10
¿Inspiré parcialmente jsPDF? Aprendí sobre jsPDF el día que lo anunciaste. Luciendo genial hasta ahora. Terminé con Prawn, ya que es fácilmente la mejor biblioteca de generación de PDF que existe para mis requisitos. Todavía me encantaría hacer todo mi trabajo en el navegador, ya que no estoy seguro de que pondré a Ruby en el sistema en el que estoy implementando. Estoy mirando jsPDF muy de cerca. Me encantaría ayudar, pero mi tiempo es muy limitado. Eso podría cambiar en el futuro.
ameba

77
Lo inspiraste un tanto :), estaba buscando en Internet para ver si ya existía y vi que algunas personas lo encontrarían útil. Avísame si quieres ayudar. Soy @MrRio en twitter.
James Hall,

23
Todavía está muy vivo. 0.9.0rc2 Lanzado hoy.
James Hall

87
@JamesHall, me gustaría agradecerle por todo el trabajo que debe tomar para escribir esto, y por las licencias del MIT para hacer del mundo un lugar mejor cuando podría haberlo comercializado para su propio beneficio.
Charles Burns

16
¿Pueden los downvoters ofrecernos sus "mejores" ideas o soluciones? Este es un excelente esfuerzo.
Onur Yıldırım

138

Otra biblioteca de JavaScript que vale la pena mencionar es pdfmake .

El soporte del navegador no parece ser tan fuerte como jsPDF, ni parece haber una opción para formas, pero las opciones para formatear texto son más avanzadas que las opciones disponibles actualmente en jsPDF.


77
Esta respuesta debería ser votada mucho más, pdfmake es mucho más robusto que jspdf. Sin embargo, solo una nota al margen, es un contenedor alrededor de la biblioteca PDFKit.
vittore

2
otra nota al margen, jspdf no tiene soporte para utf-8 y pdfmake tiene soporte para utf-8 solo para fuentes predeterminadas.
Leo

"pdfmake.min.js - 0.1.22 - hace 9 horas" No está muerto, actualizado este día.
zenbeni

Al comparar los dos campos de juego, para mí parece que jsPDF está más orientado a la creación de PDF "gráfico", mientras que pdfmake está más orientado a generar documentos "planos" bien formateados, parece tener muchas más opciones para el formato de texto genérico.
cslotty

¿Es esto IE amigable?
Wildhammer

59

Mantengo PDFKit , que también poderes pdfmake (ya se ha mencionado aquí). Funciona tanto en Node como en el navegador, y admite un montón de cosas que otras bibliotecas no:

  • Incrustar fuentes subconjustadas, con soporte para Unicode.
  • Muchas cosas de diseño de texto avanzado (columnas, salto de página, salto de línea completo Unicode, texto enriquecido básico, etc.).
  • Trabajando en más fuentes para una tipografía avanzada (ligaduras OpenType / AAT, sustitución contextual, etc.). Próximamente: vea la rama de fontkit si está interesado.
  • Más material gráfico: gradientes, etc.
  • Construido con herramientas modernas como browserify y streams. Utilizable tanto en el navegador como en el nodo.

Visite http://pdfkit.org/ para obtener un tutorial completo para ver por sí mismo lo que PDFKit puede hacer. Y para ver un ejemplo de qué tipo de documentos se pueden producir, consulte los documentos en formato PDF generados a partir de algunos archivos Markdown utilizando el propio PDFKit: http://pdfkit.org/docs/guide.pdf .

También puede probarlo interactivamente en el navegador aquí: http://pdfkit.org/demo/browser.html .


¿No es esta una biblioteca del lado del servidor? Creo que la discusión está en la biblioteca js del lado del cliente.
Ash Catchem

10
PDFKit funciona tanto en Node como en el navegador como se menciona en la respuesta. Vea el enlace a una demostración del navegador.
devongovett

¿Comprime esto las imágenes? Estoy trabajando en una aplicación web que funciona de manera similar a camscanner y estoy buscando la creación de PDF a través de JavaScript para aprovechar la compresión y el formato de páginas múltiples.
Trevor

@devongovett, ¿puedes mirar mi pregunta sobre tu biblioteca?
ninbit

8

Otro proyecto interesante es texlive.js .

Le permite compilar (La) TeX a PDF en el navegador.


El ejemplo de hello world se ve muy bien pero tarda unos 30 segundos en completarse.
Sam Sippe

2

Puede utilizar este servicio gratuito agregando un enlace que crea pdf desde cualquier url (por ejemplo, http://www.phys.org ):

http://freehtmltopdf.com/?convert=http%3A%2F%2Fwww.phys.org&size=US_Letter&orientation=portrait&framesize=800&language=en


1
Actualización: cuando fui a consultar este servicio freehtmltopdf.com , dijo que ya no estaba disponible. ¡Parece que fue increíble!
Mark Duiker

comprobado ahora - funciona. y es sorprendente, utilizo un servicio donde pago por cada pdf, y necesito codificar, esto es un solucionador de problemas.
Sergey Sob

-29

Incluso si pudiera generar el PDF en memoria en JavaScript, aún tendría el problema de cómo transferir esos datos al usuario. Es difícil para JavaScript simplemente enviar un archivo al usuario.

Para llevar el archivo al usuario, debe enviar un servidor para que el navegador muestre el cuadro de diálogo Guardar.

Dicho esto, realmente no es demasiado difícil generar archivos PDF. Solo lee las especificaciones.


1
No es difícil en absoluto, por ejemplo, parece funcionar con Data-URI en.wikipedia.org/wiki/Data_URI_scheme (ya lo he hecho antes pero no recuerdo si usé Data-URI).
Björn

58
Puede crear fácilmente archivos en JavaScript en estos días. (Soy del futuro)
Derek 朕 會 功夫

55
Es realmente simple hoy en día ... mira
roy riojas

9
@FrankKrueger si elimina su respuesta, ganará 6 puntos: P
Kamil Kiełczewski

8
@FrankKreuger, "Ir a leer las especificaciones" casi nunca es la respuesta correcta en SO.
Krishnan Venkiteswaran
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.