審核和核准
在 COVID-19 疫情期間，許多公司需要進行遠端跨團隊協作， 共用和審核數位檔會為團隊和跨職能資源帶來一系列挑戰。
這些挑戰包括以不同的檔案格式共用檔、有效檢閱和注釋內容，以及與最近的編輯進行同步。 Adobe Acrobat Services API 的設計是為了讓應用程式開發人員為使用者解決這些挑戰。
您可以學習哪些內容
此實作教學課程說明如何在 Node.js 和 Express 網頁應用程式中建立檔審核和核准工作流程。 若要繼續本教學課程，您需要使用 Node.js 體驗。
應用程式具有下列功能：
-
將不同檔案類型轉換為 PDF
-
啟用檔案上傳
-
讓使用者能夠新增注釋和批註
-
在注釋中顯示 PDF
-
啟用使用者設定檔以識別注釋作者
-
將檔案合併成使用者可下載的最終 PDF
相關 API 和資源
建立Adobe API認證
在啟動程式碼之前，您必須 為「嵌入API」和「Adobe PDF服務」API建立Adobe PDF認證。 PDF 內嵌API可供免費使用。 PDF Services API六個月免費使用，然後您就可以轉換為 依即付費計畫，每份檔交易只要 $0.05。
API建立 PDF Services 認證時，請選取「 建立個人化程式碼範例 」選項，然後選取該語言的 Node.js。 儲存 ZIP 檔案，並將 pdftools-api-credentials.json 和 private.key 解壓縮至 Node.js Express 專案的根目錄。
設定專案和相依性
設定您的 Node.js 和 Express 專案，從名為「public」的檔案夾中提供靜態檔案。 您可以根據自己的偏好設定專案方式。 若要快速開始使用，您可以使用 Express 應用程式產生器。 或者，如果您想要讓事情保持簡單，您可以 從頭開始，將程式碼保存在單一JavaScript檔案中。 在上方連結的範例專案中，您使用的是一個檔案的方法，並將您的所有程式碼保留在 index.js 中。
pdftools-api-credentials.json將個人化程式碼範例中的檔案和 private.key 檔案複製到專案的根目錄。此外，如果有 .gitignore 檔案，請將其新增至 .gitignore 檔案，這樣您的認證檔案就不會意外傳送至儲存庫。
接著，執行 npm install @adobe/documentservices-pdftools-node-sdk Node.js SDK for PDF Services。 匯入此模組，並在其他相依性匯入後，于您的程式碼 （範例專案中的 index.js） 內建立API認證物件：
const PDFToolsSdk = require( "@adobe/documentservices-pdftools-node-sdk" );
// Create Credentials
const credentials = PDFToolsSdk.Credentials
.serviceAccountCredentialsBuilder()
.fromFile( "pdftools-api-credentials.json" )
.build();
您的起始程式碼應如下所示：
const express = require( "express" );
const PDFToolsSdk = require( "@adobe/documentservices-pdftools-node-sdk" );
// Create Credentials
const credentials = PDFToolsSdk.Credentials
.serviceAccountCredentialsBuilder()
.fromFile( "pdftools-api-credentials.json" )
.build();
const app = express();
app.use( express.static( "public" ) );
app.listen( 8889, function() {
console.log( "Server started on port", 8889 );
} );
現在您可以使用 Acrobat Services API 了。
將檔案轉換為 PDF
在檔工作流程的第一部分，使用者必須上傳要共用的檔。 若要啟用此功能，您可以新增上傳功能，並將不同檔檔案格式合併到 PDF 中，為審核程式做準備。
首先，根據 PDF Services API 的範例片段，建立將檔轉換為 PDF 的功能。 此範例也顯示了許多其他重要功能的片段，包括光學字元辨識 （OCR）、密碼保護和移除以及壓縮。
function fileToPDF( filename, outputFilename, callback ) {
// Create an ExecutionContext using credentials and create a new operation
instance.
const executionContext = PDFToolsSdk.ExecutionContext.create( credentials ),
createPdfOperation = PDFToolsSdk.CreatePDF.Operation.createNew();
// Set operation input from a source file.
const input = PDFToolsSdk.FileRef.createFromLocalFile( filename );
createPdfOperation.setInput( input );
// Execute the operation and Save the result to the specified location.
createPdfOperation.execute( executionContext )
.then( result => {
result.saveAsFile( outputFilename );
callback( outputFilename );
} );
}
您現在可以使用此功能，從已上傳的檔建立 PDF。
處理檔案上傳
接下來，伺服器需要在網頁伺服器上上傳檔案端點，才能接收和處理檔。
首先，在上傳檔案夾內建立一個檔案夾，並將其命名為「草稿」。 您可以將已上傳的檔案和轉換後的 PDF 檔案儲存在這裡。 接下來，執行 npm install express-fileupload 以安裝 Express-FileUpload 模組，並在程式碼中將中介軟體新增至 Express：
const fileUpload = require( "express-fileupload" );
app.use( fileUpload() );
現在，新增端 /upload 點，然後使用相同的檔案名將上傳的檔案儲存在 Drafts 檔案夾中。 然後，請呼叫您先前撰寫的功能，以建立同一份檔的 PDF 檔案 （如果尚未採用 PDF 格式）。 您可以根據上傳的原始檔案名稱產生新 PDF 檔案的檔案名：
// Create a PDF file from an uploaded file
app.post( "/upload", ( req, res ) => {
if( !req.files || Object.keys( req.files ).length === 0 ) {
return res.status( 400 ).send( "No files were uploaded." );
}
// Create PDF from the uploaded file
let file = req.files.myFile;
file.mv( __dirname + "/uploads/drafts/" + file.name, ( err ) => {
if( err ) {
return res.status( 500 ).send( err );
}
if( file.name.endsWith( ".pdf" ) ) {
res.redirect( "/" );
}
else {
// Convert to PDF
fileToPDF( __dirname + "/uploads/drafts/" + file.name, __dirname + "/uploads/drafts/" + file.name.replace( /\./g, "-" ) + ".pdf", ( file ) => {
res.redirect( "/" );
} );
}
});
} );
建立上傳頁面
現在，若要從網頁應用程式上傳檔案，請在上傳檔案夾內建立 index.html 網頁。 在頁面上，新增檔案上傳表格，將檔案傳送至 /上傳端點：
<form ref="uploadForm"
action="/upload"
method="post"
encType="multipart/form-data">
<input type="file" name="myFile" accept=".doc,.docx,.ppt,.pptx,.xls,.xlsx,.txt,.rtf,.bmp,.jpg,.gif,.tiff,.png">
<input type="submit" value="Upload File" />
</form>
您現在可以將檔上傳至 Node.js 伺服器。 伺服器會將檔案儲存在上傳/草稿資料夾內，並在檔案旁邊建立 PDF 格式版本。
您現在已準備好嵌入上傳的檔，所以請使用 PDF 內嵌API，讓使用者能夠輕鬆地將注釋和批註新增至檔。
列舉 PDF 檔案
一般檔工作流程可能涉及多個檔，因此您必須顯示檔案清單，並將每個檔連結至應用程式中的新檔審核頁面。
首先，在伺服器代碼內新增 /檔案端點，該端點會取得並傳回儲存在上傳/草稿檔案夾中的所有 PDF 檔案清單：
const fs = require( "fs" );
app.get( "/files", ( req, res ) =\> {
fs.readdir( \_\_dirname + "/uploads/drafts/", ( err, files ) =\> {
if( err ) {
return res.status( 500 ).send( err );using
}
return res.json( files.filter( f =\> f.endsWith( ".pdf" ) ) );
} );
} );
/download/:file新增可存取已上傳 PDF 檔案的路徑，以便嵌入至網頁。
app.get( "/download/:file", function( req, res ){
// Note: In production code, this should check authentication and user access permissions
res.download( __dirname + "/uploads/drafts/" + req.params[ "file" ] );
});
使用在載入時間填滿的檔案清單元素更新 index.html 頁面。 每個專案都可以連結至 draft.html 網頁，而且您會使用查詢字串參數將檔案名傳遞至頁面。
<ul id="filelist">
<li>Loading documents...</li>
</ul>
...
<script>
// Load current files
fetch( "/files" )
.then( r => r.json() )
.then( files => {
if( files && files.length > 0 ) {
$( "#filelist" ).empty();
files.forEach( file => {
$( "#filelist" ).append( `<li><a
href="/draft.html?file=${file}">${file}</a></li>` );
})
} else {
$("#filelist").append("<div>No documents found.</div>");
}
});
</script>
嵌入 PDF
您已準備好在網頁應用程式中內嵌入和顯示 PDF 檔案。
建立名為 「draft.html」 的網頁，並在頁面上為嵌入的 PDF 新增 div 元素：
<div id="adobe-dc-view"></div>
包含資料庫 Acrobat Services ：
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
在自訂腳本標籤中，從查詢字串參數剖析檔案名，讓您知道要在頁面上嵌入哪個檔案：
<script type="text/javascript">
let params = new URLSearchParams( window.location.search );
let filename = params.get( "file" );
</script>
針對可將指定 PDF 檔案載入 div 元素內的內嵌檢視的 adobe_dc_view_sdk.ready 事件新增檔事件聽眾。 使用 PDF 內嵌API認證中的用戶端 ID。 您想要啟用注釋和批註，所以請將檢視嵌FULL_WINDOW模式，然後將 showAnnotationsTools 選項設為 true。
document.addEventListener( "adobe_dc_view_sdk.ready", () => {
var adobeDCView = new AdobeDC.View( {
clientId: "YOUR CLIENT ID HERE",
divId: "adobe-dc-view",
locale: "en-US",
} );
adobeDCView.previewFile( {
content: { location: { url: "download/" + filename } },
metaData: { fileName: "Draft Version.pdf" }
}, {
embedMode: "FULL_WINDOW",
showAnnotationTools: true,
showPageControls: true
} );
});
建立使用者設定檔
依預設，此檢視中的注釋和批註會顯示為「訪客」。 您可以將頁面代碼中的使用者基本資料回呼註冊至 PDF 檢視，以設定注釋和批註的目前審核者名稱。 以下是範例描述檔。 在包含使用者驗證的完整應用程式中，可透過這種方式設定登入使用者會話的設定檔資訊，以識別審核工作流程中檔的每個注釋者。
adobeDCView.registerCallback(
AdobeDC.View.Enum.CallbackType.GET_USER_PROFILE_API,
() => {
return new Promise( ( resolve, reject ) => {
resolve({
code: AdobeDC.View.Enum.ApiResponseCode.SUCCESS,
data: {
userProfile: {
name: "YOUR NAME",
firstName: "FIRST",
lastName: "LAST",
email: "document.editor@adobe.com"
}
}
});
});
}
);
當您使用此網頁看到任何已上傳的檔並加上批註時，您的設定檔會將您識別為特定使用者。
儲存檔回饋
使用者對檔發表評論後，他們按一下「儲存 」。 依預設，按一下「儲存 」會下載更新後的 PDF 檔案。 變更此動作以補救伺服器上目前的 PDF 檔案。
/save在上傳/草稿資料夾中，將端點新增至覆寫 PDF 檔案的伺服器程式碼：
// Overwrite the PDF file with latest PDF changes and annotations
app.post( "/save", ( req, res ) => {
if( !req.files || Object.keys( req.files ).length === 0 ) {
return res.status( 400 ).send( "No files were uploaded." );
}
let file = req.files.pdf;
file.mv( __dirname + "/uploads/drafts/" + file.name, ( err ) => {
if( err ) {
return res.status( 500 ).send( err );
}
res.send( "File uploaded" );
});
} );
針對將內容上傳至 /儲存端點的 SAVE_API 註冊 PDF 檢視回呼。 您可以變更 autoSaveFrequency 值，讓您的應用程式在計時器上自動儲存變更，並在完成時將其他中繼資料加入目前內嵌的檔案 （如需要）。
adobeDCView.registerCallback(
AdobeDC.View.Enum.CallbackType.SAVE_API,
( metaData, content, options ) => {
return new Promise( ( resolve, reject ) => {
let formData = new FormData();
formData.append( "pdf", new Blob( [ content ] ), "drafts/" + filename
);
fetch( "/save", {
method: "POST",
body: formData
}).then( resp => {
resolve({
code: AdobeDC.View.Enum.ApiResponseCode.SUCCESS,
data: {
/* Updated file metadata after successful save operation */
metaData: Object.assign( metaData, {} )
}
});
});
});
},
{
autoSaveFrequency: 0,
enableFocusPolling: false,
showSaveButton: true
}
);
現在，伺服器上會儲存檔草稿上的注釋和附注。 您可以 進一步瞭解回呼如何融入您的工作流程。 例如， 如果多人想要同時審閱同一份檔並加上注釋，狀態回呼有助於處理檔案衝突。
在最後的步驟中，您可以使用「PDF 服務」API將所有編輯過的檔合併為一個 PDF 檔案。
合併 PDF 檔案
PDF 組合程式碼就像 PDF 建立程式碼，但使用 CombineFiles 操作，然後將每個檔案新增為輸入。
function combineFilesToPDF( files, outputFilename, callback ) {
// Create an ExecutionContext using credentials and create a new operation
instance.
const executionContext = PDFToolsSdk.ExecutionContext.create( credentials ),
combineFilesOperation = PDFToolsSdk.CombineFiles.Operation.createNew();
// Set operation inputs from source files.
files.forEach( file => {
const input = PDFToolsSdk.FileRef.createFromLocalFile( file );
combineFilesOperation.addInput( input );
} );
// Execute the operation and Save the result to the specified location.
combineFilesOperation.execute( executionContext )
.then( result => {
result.saveAsFile( outputFilename );
callback( outputFilename );
} );
}
下載最終 PDF
新增名為 /finalize 的端點，呼叫功能，將資料夾內 uploads/drafts 的所有 PDF 檔案合併到 Final.pdf 檔案中，然後下載。
app.get( "/finalize", ( req, res ) => {
fs.readdir( __dirname + "/uploads/drafts/", ( err, files ) => {
if( err ) {
return res.status( 500 ).send( err );
}
combineFilesToPDF(
files.filter( f => f.endsWith( ".pdf" ) ).map( f => __dirname +
"/uploads/drafts/" + f ),
__dirname + "/uploads/Final.pdf", ( file ) => {
res.download( file );
} );
} );
} );
最後，在主要索引.html 網頁中新增連結至此 /finalize 端點。 此連結可讓使用者下載檔案工作流程的結果。
<a href="/finalize">Download final PDF</a>
後續步驟
本實作教學課程展示了 API 如何 Acrobat Services 將檔共用和審核工作流程 🔗 整合 到網頁應用程式中。此應用程式可讓遠端工作人員共用檔案並與團隊成員共同作業，這對在家工作的員工和承包商特別有説明。
您可以使用這些技術在您的應用程式中啟用共同作業，或探索 PDF Services Node SDK 範例和 PDF 內嵌API在 GitHub 上的范例，以獲得關於如何使用 Adobe API 的靈感。
準備好在自己的應用程式中啟用檔共用和審核了嗎？ 註冊您的 Adobe Acrobat Services開發人員帳戶。免費存取Adobe PDF嵌入」，並享有其他 API 的六個月免費試用版。 試用之後，您可以 隨即付費，隨著業務成長，每份檔交易只要 $0.05。