Node.js の REST API を使用して PDF ドキュメントに注釈を付ける

Node.js 開発者は、クラウド上でプログラムによって PDF ドキュメントに簡単に注釈を付けることができます。画像、コメント、メモ、またはその他の種類の外部コメントを注釈としてドキュメントに追加できます。この記事では、Node.js の REST API を使用して PDF ドキュメントに注釈を付ける方法を学習します。

この記事では次のトピックについて説明します。

ドキュメント注釈 REST API および Node.js SDK

PDF ドキュメントに注釈を付けるには、GroupDocs.Annotation Cloud の Node.js SDK API を使用します。これを使用すると、オンラインでドキュメント注釈ツールをプログラム的に構築できます。サポートされているドキュメント形式に、注釈、透かしオーバーレイ、テキスト置換、墨消し、およびテキスト マークアップを追加できます。また、クラウド API の ドキュメント アノテーション ファミリー メンバー として、.NET、Java、PHP、Ruby、Python SDK も提供します。

コンソールで次のコマンドを使用して、GroupDocs.Annotation Cloud を Node.js アプリケーションにインストールできます。

npm install groupdocs-annotation-cloud

手順と利用可能なコード例を開始する前に、ダッシュボード からクライアント ID とクライアント シークレットを取得してください。 ID とシークレットを取得したら、以下に示すようにコードを追加します。

global.clientId = "659fe7da-715b-4744-a0f7-cf469a392b73"; // Get ClientId and ClientSecret from https://dashboard.groupdocs.cloud
global.clientSecret = "b377c36cfa28fa69960ebac6b6e36421"; // Get ClientId and ClientSecret from https://dashboard.groupdocs.cloud
global.myStorage = "";

const configuration = new groupdocs_annotation_cloud.Configuration(clientId, clientSecret);
configuration.apiBaseUrl = "https://api.groupdocs.cloud";

Node.js の REST API を使用して PDF ドキュメントに注釈を付ける

以下の簡単な手順に従って、クラウド上の PDF ドキュメントに注釈を付けることができます。

  1. PDFファイルをクラウドにアップロード
  2. Node.js を使用して PDF ドキュメントに注釈を付ける
  3. 注釈付きファイルをダウンロード

ドキュメントをアップロードする

まず、次のコード サンプルを使用して PDF ファイルをクラウドにアップロードします。

// APIを初期化する
var fileApi = new groupdocs_annotation_cloud.FileApi(configuration);

// ローカル/ディスクからIOStreamでファイルを開きます。
var resourcesFolder = 'C:\\Files\\sample.pdf';
// ファイルを読み取る
fs.readFile(resourcesFolder, (err, fileStream) => {
  // アップロードファイルリクエストの作成
  var request = new groupdocs_annotation_cloud.UploadFileRequest("sample.pdf", fileStream, myStorage);
  // ファイルをアップロードする
  fileApi.uploadFile(request)
});

その結果、アップロードされた PDF ファイルは、クラウド上のダッシュボードの ファイル セクション で利用できるようになります。

Node.js を使用して PDF ドキュメントに注釈を付ける

以下の手順に従って、プログラムで PDF ドキュメントに複数の注釈を追加できます。

  • AnnotateApi のインスタンスを作成する
  • AnnotationInfo の最初のインスタンスを作成します。
  • 最初のインスタンスの注釈プロパティ (位置、タイプ、テキストなど) を設定します。
  • AnnotationInfo の 2 番目のインスタンスを作成します。
  • 2 番目のインスタンスの注釈プロパティ (位置、タイプ、テキストなど) を設定します。
  • AnnotationInfo の 3 番目のインスタンスを作成します。
  • 3 番目のインスタンスの注釈プロパティ (位置、タイプ、テキストなど) を設定します。
  • AnnotationInfo の 4 番目のインスタンスを作成します。
  • 4 番目のインスタンスの注釈プロパティ (位置、タイプ、テキストなど) を設定します。
  • FileInfo インスタンスを作成し、入力ファイルのパスを設定します。
  • AnnotateOptions のインスタンスを作成する
  • FileInfo と定義された注釈インスタンスを AnnotateOptions に割り当てます。
  • 出力ファイルのパスを設定する
  • AnnotateOptions を指定して AnnotateRequest メソッドを呼び出してリクエストを作成します。
  • AnnotateRequest で AnnotateApi.annotate() メソッドを呼び出して結果を取得します

次のコード サンプルは、Node.js の REST API を使用して PDF ドキュメントに複数の注釈を付ける方法を示しています。

// APIを初期化する
let 注釈を付けるApi = groupdocs_annotation_cloud.AnnotateApi.fromKeys(clientId, clientSecret);

// 距離の注釈
let a1 = new groupdocs_annotation_cloud.AnnotationInfo();
a1.annotationPosition = new groupdocs_annotation_cloud.Point();
a1.annotationPosition.x = 1;
a1.annotationPosition.y = 1;
a1.box = new groupdocs_annotation_cloud.Rectangle();
a1.box.x = 100
a1.box.y = 100
a1.box.width = 200
a1.box.height = 100
a1.pageNumber = 0
a1.penColor = 1201033
a1.penStyle = groupdocs_annotation_cloud.AnnotationInfo.PenStyleEnum.Solid;
a1.penWidth = 3
a1.opacity = 1
a1.type = groupdocs_annotation_cloud.AnnotationInfo.TypeEnum.Distance;
a1.text = "This is 距離の注釈";
a1.creatorName = "Anonym A.";

// エリアの注釈
let a2 = new groupdocs_annotation_cloud.AnnotationInfo();
a2.annotationPosition = new groupdocs_annotation_cloud.Point();
a2.annotationPosition.x = 1;
a2.annotationPosition.y = 1;
a2.box = new groupdocs_annotation_cloud.Rectangle();
a2.box.x = 80
a2.box.y = 400
a2.box.width = 200
a2.box.height = 100
a2.penColor = 1201033;
a2.penStyle = groupdocs_annotation_cloud.AnnotationInfo.PenStyleEnum.Solid;
a2.pageNumber = 0;
a2.penWidth = 3;
a2.type = groupdocs_annotation_cloud.AnnotationInfo.TypeEnum.Area;
a2.text = "This is エリアの注釈";
a2.creatorName = "Anonym A.";

// テキストフィールドの注釈
let a3 = new groupdocs_annotation_cloud.AnnotationInfo();
a3.annotationPosition = new groupdocs_annotation_cloud.Point();
a3.annotationPosition.x = 100;
a3.annotationPosition.y = 100;
a3.box = new groupdocs_annotation_cloud.Rectangle();
a3.box.x = 450
a3.box.y = 150
a3.box.width = 100
a3.box.height = 30
a3.pageNumber = 0;
a3.fontColor = 65535;
a3.fontSize = 16;
a3.type = groupdocs_annotation_cloud.AnnotationInfo.TypeEnum.TextField;
a3.text = "Text field text";
a3.creatorName = "Anonym A.";

// 楕円の注釈
let a4 = new groupdocs_annotation_cloud.AnnotationInfo();
a4.annotationPosition = new groupdocs_annotation_cloud.Point();
a4.annotationPosition.x = 1;
a4.annotationPosition.y = 1;
a4.box = new groupdocs_annotation_cloud.Rectangle();
a4.box.x = 350;
a4.box.y = 350;
a4.box.width = 200;
a4.box.height = 100;
a4.pageNumber = 0;
a4.penColor = 1201033;
a4.penStyle = groupdocs_annotation_cloud.AnnotationInfo.PenStyleEnum.Solid;
a4.penWidth = 4;
a4.type = groupdocs_annotation_cloud.AnnotationInfo.TypeEnum.Ellipse;
a4.text = "This is 楕円の注釈";
a4.creatorName = "Anonym A.";

let fileInfo = new groupdocs_annotation_cloud.FileInfo();
fileInfo.filePath = "sample.pdf";
let options = new groupdocs_annotation_cloud.AnnotateOptions();
options.fileInfo = fileInfo;
options.annotations = [a1, a2, a3, a4];
options.outputPath = "Output/output.pdf";

// 注釈リクエストの作成
let request = new groupdocs_annotation_cloud.AnnotateRequest(options);
// 注釈を付ける
let result = await 注釈を付けるApi.注釈を付ける(request);

console.log("Multiple Annotations added: " + result.href);
Node.js の REST API を使用して PDF ドキュメントに注釈を付ける

Node.js の REST API を使用して PDF ドキュメントに注釈を付ける

サポートされている注釈タイプの詳細については、ドキュメントの 注釈の追加 セクションを参照してください。

注釈付きファイルをダウンロードする

上記のコード サンプルは、注釈付き PDF ファイルをクラウド上に保存します。次のコードサンプルを使用してダウンロードできます。

// FileApi を構築する
var fileApi = new groupdocs_annotation_cloud.FileApi(configuration);

// ダウンロードファイルリクエストの作成
let request = new groupdocs_annotation_cloud.DownloadFileRequest("Output/output.pdf", myStorage);
// ダウンロードファイル
let response = await fileApi.downloadFile(request);

// ファイルを作業ディレクトリに保存します
fs.writeFile("C:\\Files\\output.pdf", response, "binary", function (err) { });
console.log(response);

Node.jsを使用して画像注釈を追加する

以下の手順に従って、プログラムで PDF ドキュメントに画像注釈を追加できます。

  • AnnotateApi のインスタンスを作成する
  • AnnotationInfo のインスタンスを作成する
  • 長方形を定義し、その位置、高さ、幅を設定します
  • 注釈のプロパティ (位置、テキスト、高さ、幅など) を設定します。
  • 注釈タイプを画像として設定します
  • FileInfo インスタンスを作成し、入力ファイルのパスを設定します。
  • AnnotateOptions のインスタンスを作成する
  • FileInfo と注釈を AnnotateOptions に割り当てます。
  • 出力ファイルのパスを設定する
  • AnnotateOptions を指定して AnnotateRequest メソッドを呼び出してリクエストを作成します。
  • AnnotateRequest で AnnotateApi.annotate() メソッドを呼び出して結果を取得します

次のコード サンプルは、Node.js の REST API を使用して PDF ドキュメントに画像注釈を追加する方法を示しています。前述の手順に従ってファイルをアップロードおよびダウンロードしてください。

// APIを初期化する
let 注釈を付けるApi = groupdocs_annotation_cloud.AnnotateApi.fromKeys(clientId, clientSecret);

// 画像の注釈
let a1 = new groupdocs_annotation_cloud.AnnotationInfo();
a1.annotationPosition = new groupdocs_annotation_cloud.Point();
a1.annotationPosition.x = 1;
a1.annotationPosition.y = 1;
a1.box = new groupdocs_annotation_cloud.Rectangle();
a1.box.x = 300;
a1.box.y = 160;
a1.box.width = 200;
a1.box.height = 40;
a1.pageNumber = 0;
a1.penColor = 1201033;
a1.penStyle = groupdocs_annotation_cloud.AnnotationInfo.PenStyleEnum.Solid;
a1.penWidth = 1;
a1.type = groupdocs_annotation_cloud.AnnotationInfo.TypeEnum.Image;
a1.text = "This is 画像の注釈";
a1.creatorName = "Anonym A.";
a1.imagePath = "JohnSmith.png";

// 入力ファイルのパス
let fileInfo = new groupdocs_annotation_cloud.FileInfo();
fileInfo.filePath = "sample.pdf";

// 注釈オプションを定義する
let options = new groupdocs_annotation_cloud.AnnotateOptions();
options.fileInfo = fileInfo;
options.annotations = [a1];
options.outputPath = "Output/output.pdf";

// 注釈リクエストを作成する
let request = new groupdocs_annotation_cloud.AnnotateRequest(options);
// 注釈を付ける
let result = await 注釈を付けるApi.注釈を付ける(request);

console.log("Image Annotation added: " + result.href);
Node.jsを使用して画像注釈を追加する

Node.jsを使用して画像注釈を追加する

オンラインで試す

上記の API を使用して開発された、次の無料のオンライン PDF 注釈ツールをお試しください。 https://products.groupdocs.app/annotation/pdf

結論

この記事では、クラウド上の PDF ドキュメントに複数の注釈を追加する方法を学習しました。また、プログラムで PDF ドキュメントに画像注釈を追加する方法も学習しました。さらに、プログラムによって PDF ファイルをクラウドにアップロードし、注釈付きファイルをクラウドからダウンロードする方法を学習しました。 GroupDocs.Annotation Cloud API の詳細については、ドキュメント を使用して学習できます。また、ブラウザーを通じて直接 API を視覚化し操作できるようにする API リファレンス セクションも提供しています。不明な点がある場合は、フォーラム でお気軽にお問い合わせください。

関連項目