Как добавить текст поверх существующего PDF с помощью JavaScript на веб-сайте?

Я ищу способ добавить текст поверх существующего PDF с помощью JavaScript. Я представляю это как пользователь, нажимая кнопку, чтобы загрузить PDF файл и получить файл с этим оригинальным PDF-текстом и дополнительным текстом, написанным на страницах.

Можно ли это сделать?

Важно использовать существующий PDF для сохранения оригинальных конструкций на нем, а в PDF также есть текст, специально набранный в разных шрифтах и ​​широкий спектр символов в Unicode.

Также важно сгенерировать этот текст в PDF с веб-страницы, поскольку каждый созданный текст будет немного отличаться, создавая уникальный PDF для конечного пользователя.

Я изучаю эту тему в Интернете и нашел библиотеку jsPDF, но, похоже, только создает PDF файлы, а не записывает поверх существующих PDF файлов, а содержимое, которое мне нужно в PDF файле, слишком сложно использовать jsPDF для его создания все. Я не хочу использовать существующий PDF в качестве фонового изображения, если мне это не нужно.

Я также нашел некоторые бэкэнд-библиотеки, такие как PDFKit, но хотел бы избежать использования библиотеки бэкэнда, если это вообще возможно, - и он также, похоже, не пишет поверх существующих PDF файлов.

Я видел некоторые вещи в текстовых полях в Интернете, но не мог понять, будет ли это возможным путь - можно ли добавлять текстовые поля в PDF, а затем вставлять текст в эти поля с веб-страницы прежде чем пользователь загрузит его?

Большое спасибо.

Ответы

Ответ 1

Я думаю, вы можете конвертировать ваш файл PDF в html или хотя бы нарисовать его на холсте в этот момент. Если вы можете, вы можете использовать jsPDF для добавления наложения html поверх существующего html для создания нового файла 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>

Ответ 2

Нашел это решение. Извините, но это связано с выполнением некоторых действий на стороне сервера.:)

Он включает

  • Преобразование pdf в html с помощью pdf2htmlEX.

  • Манипулируйте html, как вам нужно. Вы можете использовать cheerio для упрощения манипуляции с dom.

  • Преобразуйте html обратно в pdf, используя что-то вроде jspdf.

Подробнее об этом здесь.

Ответ 3

PDF файлы доступны только для чтения, поэтому после их создания они не могут редактироваться, только читать. Нет никакого способа сделать это с помощью любой программы, не говоря уже о Javascript, кроме создания полного PDF файла с нуля, используя те же шаги, что и для создания первого.