web-dev-qa-db-ja.com

ウェブサイトでJavaScriptを使用して既存のPDF）の上にテキストを追加するにはどうすればよいですか？

JavaScriptを使用して既存のPDFの上にテキストを追加する方法を探しています。ユーザーがボタンをクリックしてPDF andこのオリジナルのPDFとページ上に書かれた追加のテキストを含むファイルを受け取ります。

これが可能な方法はありますか？

既存のPDFを使用して、元のデザインを保持することが重要です。また、PDFには、さまざまな書体で特別に組版されたテキストが含まれています。ユニコードグリフ。

生成される各テキストはわずかに異なるため、このテキストをWebページからPDFに生成することも重要です。これにより、エンドユーザーに固有のPDFが作成されます。

私はこのトピックをオンラインで調査していて、jsPDFライブラリを見つけましたが、それはPDFを生成するだけで、既存のPDFの上に書き込むことはないようで、PDFに必要なコンテンツは複雑すぎますjsPDFを使用してすべてを生成します。必要がない場合は、既存のPDFを背景画像として使用したくありません。

PDFKitのようなバックエンドライブラリもいくつか見つかりましたが、可能な限りバックエンドライブラリの使用を避けたいと考えています。また、既存のPDFを上書きしていないようです。

オンラインでテキストフィールドについていくつか見ましたが、これが実行可能なパスであるかどうかを理解するのに苦労しました。PDFにテキストフィールドを追加してから、テキストを挿入することは可能でしょうか？ユーザーがダウンロードする前に、Webページからこれらのフィールドに入力しますか？

どうもありがとうございました。

javascripthtmlpdfdynamically-generated
22
ar-ar

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>
8
Gökhan Kurt

この解決策を見つけました。申し訳ありませんが、サーバー側でいくつかの作業を行う必要があります。 :)

それは含まれます

  1. pdf2htmlEX を使用してpdfをhtmlに変換します。

  2. 必要に応じてhtmlを操作します。 domの操作を簡単にするために、おそらく cheerio を使用できます。

  3. jspdf のようなものを使用して、htmlをpdfに変換し直します。

それについての詳細 ここ 。

3
philip oghenerobo balogun