generate - ¿Cómo agregar texto sobre un PDF existente usando JavaScript en un sitio web?

jspdf css

Question

Estoy buscando una manera de agregar texto sobre un PDF existente usando JavaScript. Lo veo como un usuario haciendo clic en un botón para descargar el PDF y recibir un archivo con este PDF original y texto adicional escrito en las páginas.

¿Hay alguna manera de que esto sea posible?

Es importante utilizar un PDF existente para preservar los diseños originales, y el PDF también incluye texto especialmente tipeado en diferentes tipos de letra y una amplia gama de glifos de Unicode.

También es importante generar este texto en el PDF desde una página web, ya que cada texto generado será ligeramente diferente, creando un PDF único para el usuario final.

He estado investigando este tema en línea y he encontrado la biblioteca jsPDF, pero eso parece generar solo archivos PDF, no escribir sobre los archivos PDF existentes, y el contenido que necesito en el PDF es demasiado complejo para usar jsPDF para generarlo todo. No quiero usar el PDF existente como imagen de fondo si no tengo que hacerlo.

También encontré algunas bibliotecas de fondo como PDFKit, pero me gustaría evitar el uso de una biblioteca de fondo si es posible, y parece que no escribe sobre los archivos PDF existentes.

Vi algunas cosas acerca de los campos de texto en línea, pero tuve problemas para entender si este sería un camino viable, podría ser posible agregar campos de texto en el PDF y luego insertar texto en esos campos desde una página web antes del usuario lo descarga?

Muchas gracias.

Answer 1

Encontré esta solución. Lo sentimos, pero implica hacer algún trabajo en el lado del servidor. :)

Se trata de

1. Convierte pdf a html usando pdf2htmlEX .

2. Manipule el html como lo necesite. Probablemente podrías usar el cheerio para facilitar la manipulación del dom.

3. Convertir el html de nuevo a un pdf usando algo como jspdf .

Más sobre esto here .

Answer 2

Los PDF son de solo lectura, por lo que una vez creados, no se pueden editar, solo leer. No hay manera de hacer esto a través de cualquier programa, no importa JavaScript, aparte de generar el pdf completamente desde cero usando los mismos pasos que se usaron para crear el primero.

Answer 3

Supongo que puedes convertir tu archivo PDF a html o al menos dibujarlo en un lienzo en este momento. Si puede, puede usar jsPDF para agregar html de superposición sobre el html existente para generar un nuevo archivo PDF.

var doc = new jsPDF();

doc.addHTML(document.body, function() {
    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?'');
    printData();
});

printData = function() {
  var str = doc.output(''datauristring'');
  console.log(str);
  // window.open(str);  Optional
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>


<div id="mypdf">
  <div>
    My Pdf Content Here
  </div>
</div>