GroupDocs.註釋雲|使用 Node.js 註釋 PDF 文檔

作為 Node.js 開發人員，您可以輕鬆地在雲上以編程方式對任何 PDF 文檔進行註釋。您可以將圖像、評論、註釋或其他類型的外部註釋作為註釋添加到文檔中。在本文中，您將學習如何在 Node.js 中使用 REST API 對 PDF 文檔進行註釋。

本文應涵蓋以下主題：

文檔註釋 REST API 和 Node.js SDK
在 Node.js 中使用 REST API 註釋 PDF 文檔
使用 Node.js 添加圖像註釋

文檔註釋 REST API 和 Node.js SDK

為了註釋 PDF 文檔，我將使用 GroupDocs.Annotation Cloud 的 Node.js SDK API。它允許您以編程方式在線構建文檔註釋工具。您可以向支持的文檔格式添加註釋、水印疊加、文本替換、密文和文本標記。它還提供 .NET、Java、PHP、Ruby 和 Python SDK 作為 Cloud API 的文檔註釋系列成員。

您可以在控制台中使用以下命令將 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 文檔添加註釋：

上傳PDF文件至雲端
使用 Node.js 註釋 PDF 文檔
下載註釋文件

上傳文件

首先，使用以下代碼示例將 PDF 文件上傳到雲端：

// 初始化接口
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 的第二個實例
為第二個實例設置註釋屬性，例如位置、類型、文本等。
創建 AnnotationInfo 的第三個實例
為第三個實例設置註釋屬性，例如位置、類型、文本等。
創建 AnnotationInfo 的第四個實例
為第四個實例設置註釋屬性，例如位置、類型、文本等。
創建一個 FileInfo 實例並設置輸入文件路徑
創建 AnnotateOptions 的實例
將 FileInfo 和定義的註釋實例分配給 AnnotateOptions
設置輸出文件路徑
通過使用 AnnotateOptions 調用 AnnotateRequest 方法來創建請求
使用 AnnotateRequest 調用 AnnotateApi.annotate() 方法獲取結果

下面的代碼示例展示瞭如何使用 Node.js 中的 REST API 為一個 PDF 文檔添加多個註釋。

// 初始化接口
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);

您可以在文檔的 adding annotations 部分下閱讀有關支持的註釋類型的更多信息。

下載註釋文件

上面的代碼示例會將帶註釋的 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 文檔中添加圖像註釋。請按照前面提到的步驟上傳和下載文件。

// 初始化接口
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);

在線試用

請試用以下使用上述API開發的免費在線PDF註釋工具。 https://products.groupdocs.app/annotation/pdf

結論

在本文中，您了解瞭如何為雲端 PDF 文檔添加多個批註。您還學習瞭如何以編程方式向 PDF 文檔添加圖像註釋。此外，您還學習瞭如何以編程方式將 PDF 文件上傳到雲端，然後從雲端下載帶註釋的文件。您可以使用文檔了解有關 GroupDocs.Annotation Cloud API 的更多信息。我們還提供了一個 API 參考部分，讓您可以直接通過瀏覽器可視化我們的 API 並與之交互。如有任何歧義，請隨時在論壇上與我們聯繫。

也可以看看

在 Node.js 中使用 REST API 從 PDF 中提取或刪除註釋

文檔註釋 REST API 和 Node.js SDK#

在 Node.js 中使用 REST API 註釋 PDF 文檔#

上傳文件#

使用 Node.js 註釋 PDF 文檔#

下載註釋文件#

使用 Node.js 添加圖像註釋#

在線試用#

結論#

也可以看看#