web-dev-qa-db-ja.com

ブラウザで*既存* PDFを編集

現在、サーバーからPDFのbase64表現を取得しているWebアプリケーションがあります。Mozillaのpdf.jsを使用して、これを_<canvas>_に表示して切り替えることができますドロップダウンでページを移動します。

私が見つけたすべてのものと Mozillaのpdf.jsはPDFを修正できますか? によると、PDFをpdf.jsで編集することはできません。

jsPDF が見つかりましたが、キャンバスを取得して、各ページで.toDataURL()を実行し、新しいPDF =文書化されているが、2つの問題がある。

  1. 新しく生成されたPDFは各ページの一連の画像になります。そのため、元のPDFそれと。
  2. JsPDFを使用して新しいPDFを生成し、そのbase64をpdf.jsに送り返してキャンバスに表示します。これらのステップの間に、ページの画像が正しくスケーリングされない何かが発生します。各ページは、新しいPDFが変更されるたびに、キャンバスの約3/4を占有します。同じサイズ/スケールを保持することができませんでした。

jsPDFは、既存のPDFをロードする方法があるようには見えず、新しいPDFを作成するだけです。 pdfmake および PDFKit は、新しいPDFファイルのみを作成するように見えます。


だから私の質問:

(base64からの)pdfの表示と、それに対する変更の両方を可能にするものはありますか?理想的には、キャンバスの変更を監視し、その変更をpdfページに描画します。完了したら、それをbase64文字列にエクスポートしてサーバーに送り返します。

14
neilsimp1

簡単な答え-いいえ。クロスブラウザソリューションを見つけることはほとんどありません。 PDFに最適なソリューションが見つかることはほとんどありません。ユーザーがHTMLを編集し、サーバーでPDFを生成するようにすることを検討する方が適切です。

理由-PDF形式は、同時に華麗でありながらも華麗です。携帯性のために華麗ですが、内部構造とストレージメカニズムのために華麗です。 HTML。ポータブルドキュメント形式の開発に新たに着手した場合、PDFを選択することはできません。しかし、PDF捨てられる、期間。

若い視聴者は、このマニアックなフォーマットがどのように市場をリードする地位に達し、どこから来たのか疑問に思うかもしれません。まあ、PDF=の創始者は、XML、JSON、HTML、さらにはインターネットの前にデザインを敷設していたとき、彼らは今日のドキュメント共有を念頭に置いていませんでした。印刷命令をエンコードするためのより良い方法-PostScriptプリンタードライバーの概念これらは、プリンターが消費する前に編集されることは決してなく、他の目的には役に立たなかった。 、その後、誰かがこれを持ち運び可能なクロスデバイスディスプレイコンセプトとして採用する素晴らしい可能性を発見しました。

質問に戻る-PDFを意味のあるGUIの方法で編集するには、PDFを解凍し、コンポーネント(画像、フォーマットされたテキスト、ページ)を表示デバイスに追加してから、レイアウトを混乱させてから、PDFを再パックします。これは、PDF標準に沿って完全に行う必要があります。編集したPDFファイルのダウンストリームコンシューマは、クラッシュするか、レンダリングできません。さまざまなAcrobat標準レベル、および編集パッケージ(Word、Illustrator、 InDesign)ベンダーはPDFファイル;レイヤー、サムネイルなど)に注目しています。

それから色になります。 PDF仕様を読んで、元のPDFプロデューサーが使用することを決定できる色空間オプションの配列があることがわかります。これらを画面上の適切なデバイスの色やその逆などに解釈します。

そして、フォント。フォントは埋め込みサブセットである場合とそうでない場合があります。 PDFで忠実度を保つには、PDFで定義された縮尺で描画面にグリフをベクターグラフィックスとして認識する必要があります。これは主に何らかのプラットフォーム依存タイプライブラリを利用することを意味しますトリッキーなクロスプラットフォームに加えて、適切な使用のためにフォントのライセンスを取得する必要があるという事実は、ほとんどの人がヒップでプロフェッショナルに見えるために使用したいフォントにとって高価になる可能性があります。

PDFのレイヤー化、スケーリング、回転機能を考えると、おそらくHTMLキャンバスを描画面として見ているでしょう。知っている人なら誰でも、キャンバスの世界ではワードプロセッシング型の機能を自分でやっていることを知っているでしょう。

不可能ではないが難しい。

PDFをディスプレイにレンダリングするコンポーネントは、主にPDF描画命令に従い、通常はラスタまたはSVGグラフィックを生成します。これは一方通行です-彼らは読んで描きますが、描かれたオブジェクトに「ハンドル」の感覚はありません。ハンドルがないことは操作を意味せず、これらの人は間違いなくあなたに修正や書き戻しをさせるつもりはほとんどありません。

多くの「pdfに保存」製品があります。クライアント側では、ピクセルセットを取得し、ラスターグラフィックを「PDF」定義の最も薄いベニアがラップされたファイルにダンプするようになります。サーバーベースの場合、非常に強力になります。AsposeやABCPDFのような多くのツールがあり、PDFサーバー側の苦労をします-しかし、これはあなたが探しているものではありませんあなたのOP。

要約-非常に複雑な主題。何かが潜在的なものとして浮上した場合、PDF機能がカバーされているため、安全に編集できるものに制限があります。

最終的にPDFとしてエクスポートされるドキュメントのオンライン編集を探している場合、ドキュメントソースのhtmlバージョンを保持し、ユーザーにTinyMCE、CKEditorなどでこれを編集してから、サーバーの1つを使用することです。保存されたソースHTMLを取得してPDFにレンダリングするサイドツール。 ABCPDFなどのツールはHTMLを忠実にレンダリングし、画像、ヘッダーとフッター、ページ番号などを追加できます。

これは、(想定される)ニーズに対する実用的な答えですが、フォント(ライセンス)の問題、ブラウザーベースのエディターの不格好さ、一部のHTML編集によって作成されたHTMLの総合的な奇妙さに関して、まだいくつかのトレードオフがありますコンポーネントなど。ただし、IS実行可能。

最終的な考え-必要なものの範囲を再考します。 HTMLの編集とPDFサーバーでの使用)が使用できる場合、これは非常によく知られたパスであり、クライアントとサーバーがそれをサポートする無料および商用コンポーネントの両方が見つかります。

編集:PDFに注釈を付ける必要がある場合、物事ははるかに簡単になります。サーバーでは、ドキュメントのページの画像を生成し、クライアントに送信し、それらを表示する必要がありますユーザーは、ユーザーにそれらをマークアップさせ、注釈の座標をサーバーにキャプチャし、サーバー側PDFライブラリを使用して注釈をPDFにレンダリングします。ただし、サーバー側のさまざまなスキルセットが必要ですPDF=画像操作とクライアント側のプレゼンテーションと注釈のキャプチャ。

編集:読者は、上で描いた絵が変わったかどうかを知りたいと思うかもしれません。 2019年1月現在、私は自分が書いたものを支持しています。サプライヤーは、以前よりも多くのことを実行できる優れたツールとライブラリを使用して市場に参入しています。ただし、ニーズを評価し、制限を確認する必要があります。いくつかの制限がある可能性があります。私が知っているベンダーはまだありません。クライアント側、クロスブラウザ、クロスデバイス、フル機能PDF any PDFファイル-常にいくつかの制限がありますが、修正できてうれしいです。

20

将来の参考のために:

ブラウザーで既存のPDFを特定の範囲に編集できる2つのライブラリーを見つけました。 2番目のものはまだ文書化されていないため、それが何をするのか正確にはわかりません。将来、そのような問題の解決策になるかもしれません。

5
allinonemovie

他のSOの質問がここに向けられており、Webテクノロジーの進歩(WASMなど)を考慮して、次の回答を提供しています。 PDFNetJSは、質問が最初に尋ねられたときにこれらすべてを行うことができましたが。

「編集」の要件が「」であることが明確になったため、ユーザーが以前にアップロードしたPDFを開き、セクションをハイライトまたはサークルし、それらの注釈をPDFサーバーに戻ります。」および「テキスト定数の編集やドキュメント定数の操作は必要ありません。」、それからはい、これは最新のデバイスの最新のブラウザで完全に可能です。

PDFTron PDFNet SDK はこれをすべて実行できます。完全な、すぐに使えるドキュメントビューアーが提供され、完全な注釈がサポートされます。 PDFを実際に編集することも可能です(テキストの変更/置換、編集、画像の抽出/追加/置換など)。 PDFファイルがクライアント側で直接サポートされるだけでなく、DOCX、PPTX、XLSX、PNG、およびJPGもサポートされます。ファイルはローカルまたはリモートでロードでき、base64のエンコード/デコードを遅くする必要はありません。

デモ: http://www.pdftron.com/webviewer

サンプル: http://www.pdftron.com/documentation/web/samples/universal-samples

元の質問はSiebelのサポート用でもあり、「PDFNetJSは.memファイル(一部のバイナリデータ)を取得しようとします。これは、使用しているアプリケーション(Siebel)では処理できません。これはオプションのようには見えません。 "。

.memファイルはPNaCl用であり、Chromeのみであり、これは無効にできます。 PDFTron for Webは、WASMとemscriptenをサポートします。両方ではない場合、一方はSiebelと互換性があります。

2
Ryan
1
waspinator