使用 CDN 在國內加載本地 PDF 文件并處理批注：PDF.js 5.x 實戰指南

PDF.js 是一個強大的開源 JavaScript 庫，用于在 Web 瀏覽器中渲染 PDF 文件。它由 Mozilla 開發，能夠將 PDF 文檔繪制到 HTML5 Canvas 或 SVG 上，無需任何本機代碼或瀏覽器插件。對于許多需要在網頁中展示 PDF 內容的應用場景來說，PDF.js 是一個非常理想的選擇。

本文將重點探討以下幾個方面：

如何通過 CDN 在網頁中引入 PDF.js 庫。
在中國大陸地區選擇哪些 CDN 服務以獲得更好的訪問速度和穩定性。
如何使用 PDF.js 加載用戶選擇的本地 PDF 文件。
PDF.js 如何處理 PDF 文件中的批注，以及在使用批注功能時需要注意的事項。

我們將以 PDF.js 5.x 版本為例進行講解，但核心原理同樣適用于其他版本。

1. 通過 CDN 引入 PDF.js

使用 CDN (內容分發網絡) 引入 PDF.js 是最常見和便捷的方式，它可以減輕服務器壓力，并利用 CDN 節點的地理優勢加速文件的傳輸。引入 PDF.js 主要需要兩個文件：

pdf.min.js: PDF.js 的核心庫，包含了主要的 API 和渲染邏輯。
pdf.worker.min.js: PDF.js 的 Worker 腳本，用于在后臺線程中處理 PDF 的解析和渲染任務，避免阻塞主線程。

你需要在 HTML 文件的 <head> 或 <body> 標簽中引入它們：

<script src="[CDN_URL_FOR_PDF.MIN.JS]"></script>
<script>// 必須設置 workerSrc 指向 worker 腳本的 URLpdfjsLib.GlobalWorkerOptions.workerSrc = '[CDN_URL_FOR_PDF.WORKER.MIN.JS]';
</script>

請將 [CDN_URL_FOR_PDF.MIN.JS] 和 [CDN_URL_FOR_PDF.WORKER.MIN.JS] 替換為實際的 CDN 鏈接。注意，workerSrc 必須設置，并且核心庫和 worker 腳本的版本號必須嚴格匹配。

2. 中國大陸地區 CDN 選擇建議

對于在中國大陸地區訪問的用戶，受限于網絡環境，直接使用一些國際 CDN（如 Cloudflare CDN）可能會遇到訪問速度慢或不穩定的問題。為了獲得更好的用戶體驗，建議選擇在中國有部署節點或與中國本地服務商有合作的 CDN。

以下是兩個在中國大陸地區表現通常較好的開源庫 CDN：

a. jsDelivr

jsDelivr 是一個免費的、高速的開源 CDN，它與中國的網宿、七牛云等服務商有深度合作，擁有廣泛的中國大陸節點。對于開源庫來說，jsDelivr 是一個非常可靠的選擇。

你可以在 jsDelivr 上通過 npm/package-name@version/file-path 的格式找到 PDF.js 的文件。PDF.js 的 npm 包名是 pdfjs-dist。

例如，如果你需要引入接近 5.x 的某個穩定版本，你需要查找具體的版本號（請注意，pdf.js 版本號通常是構建號，例如 4.0.269 是一個近期版本，請替換為你實際需要的 5.x 對應的版本號）：

核心庫 (pdf.min.js):
https://cdn.jsdelivr.net/npm/pdfjs-dist@版本號/build/pdf.min.js
例：https://cdn.jsdelivr.net/npm/pdfjs-dist@4.0.269/build/pdf.min.js
Worker 腳本 (pdf.worker.min.js):
https://cdn.jsdelivr.net/npm/pdfjs-dist@版本號/build/pdf.worker.min.js
例：https://cdn.jsdelivr.net/npm/pdfjs-dist@4.0.269/build/pdf.worker.min.js

請訪問 jsDelivr 官網或利用其搜索功能，查找 pdfjs-dist 包下您需要的具體 5.x 版本號和文件路徑。

b. BootCDN

BootCDN 是一個由國內團隊維護的、專注于服務國內開發者的開源庫 CDN 平臺。它同步了許多國外常用開源庫的資源，并使用國內的 CDN 服務商提供加速。

你可以在 BootCDN 上搜索 “pdf.js” 或 “pdfjs-dist” 來找到對應的資源。BootCDN 的 URL 格式通常是 cdn.bootcdn.net/ajax/libs/library-name/version/file-path。

例如，如果你需要引入接近 5.x 的某個版本（同樣，請替換為你實際需要的 5.x 對應的版本號）：

核心庫 (pdf.min.js):
https://cdn.bootcdn.net/ajax/libs/pdf.js/版本號/pdf.min.js
例：https://cdn.bootcdn.net/ajax/libs/pdf.js/4.0.269/pdf.min.js
Worker 腳本 (pdf.worker.min.js):
https://cdn.bootcdn.net/ajax/libs/pdf.js/版本號/pdf.worker.min.js
例：https://cdn.bootcdn.net/ajax/libs/pdf.js/4.0.269/pdf.worker.min.js

請訪問 BootCDN 官網查找您需要的 pdf.js 版本對應的具體文件路徑。

重要： 在選擇 CDN 后，請務必替換 HTML 中的 [CDN_URL_FOR_PDF.MIN.JS] 和 [CDN_URL_FOR_PDF.WORKER.MIN.JS] 為您選擇的 CDN 提供的實際鏈接，并確保兩個文件的版本號一致。

3. 加載本地 PDF 文件

PDF.js 可以通過多種方式加載 PDF 源，包括 URL、 TypedArray (如 ArrayBuffer)、以及 Blob。要加載本地文件，最常用的方式是結合 <input type="file"> 和 FileReader API，將文件讀取為 ArrayBuffer，然后傳遞給 PDF.js。

首先，在 HTML 中添加一個用于用戶選擇本地文件的輸入框，以及一個用于渲染 PDF 的 canvas 元素：

<input type="file" id="pdfFile" accept=".pdf">
<canvas id="the-canvas"></canvas>

然后，使用 JavaScript 監聽文件輸入框的 change 事件，讀取文件內容并使用 PDF.js 加載和渲染：

document.getElementById('pdfFile').addEventListener('change', function(event) {var file = event.target.files[0]; // 獲取用戶選擇的第一個文件// 檢查文件類型if (file.type !== "application/pdf") {alert(file.name + " 不是一個有效的 PDF 文件。");return;}var fileReader = new FileReader();// 當文件讀取完成后fileReader.onload = function() {// 文件內容作為 ArrayBuffervar typedarray = new Uint8Array(this.result);// 使用 PDF.js 加載 PDF 文檔const loadingTask = pdfjsLib.getDocument(typedarray);loadingTask.promise.then(function(pdf) {console.log('PDF 加載成功');// 以第一頁為例進行渲染pdf.getPage(1).then(function(page) {console.log('頁面加載成功');var scale = 1.5; // 縮放比例var viewport = page.getViewport({ scale: scale });// 獲取 canvas 元素及其上下文var canvas = document.getElementById('the-canvas');var context = canvas.getContext('2d');// 設置 canvas 的尺寸與頁面 viewport 匹配canvas.height = viewport.height;canvas.width = viewport.width;// 渲染頁面到 canvasvar renderContext = {canvasContext: context,viewport: viewport};var renderTask = page.render(renderContext);renderTask.promise.then(function() {console.log('頁面渲染完成');});});}, function(reason) {// PDF 加載失敗的處理console.error('PDF 加載失敗: ' + reason);});};// 讀取文件內容為 ArrayBufferfileReader.readAsArrayBuffer(file);
});

這段代碼演示了如何加載用戶選擇的本地 PDF 文件，并將其第一頁渲染到頁面上指定的 canvas 元素中。你可以根據需要擴展代碼，實現多頁加載、滾動、縮放等功能。

4. 關于批注功能

當涉及到 PDF 批注時，需要明確一點：PDF.js 的核心功能是渲染和顯示 PDF 文檔內容，這包括顯示 PDF 文件本身已經包含的標準批注類型（如文本標記、高亮、形狀等）。

但是，PDF.js (包括 5.x 版本) 本身并不提供創建**、編輯或保存新批注的內置交互式工具或 API。**

這意味著：

如果你加載的本地 PDF 文件本身已經包含了批注，PDF.js 在渲染時會嘗試將其顯示出來。通常情況下，如果批注是標準的 PDF 批注類型，它們會隨著頁面內容一起被繪制到 Canvas 上，或者作為獨立的圖層數據提供（需要進一步處理）。
如果你希望實現用戶在網頁上添加、修改或刪除批注的功能，僅僅依靠 PDF.js 的核心庫是不夠的。你需要自己實現一套完整的批注交互邏輯和數據管理系統。這通常非常復雜，需要：
- 監聽鼠標事件，識別用戶在 Canvas 上的操作。
- 在 Canvas 上方疊加一個交互層（例如另一個 Canvas 或 SVG）來繪制批注的圖形表示。
- 根據用戶操作，創建或修改批注的數據結構。
- 將這些批注數據保存下來，如果需要保存回 PDF 文件本身，則需要更高級的庫（如 PDF-LIB，它可以在瀏覽器端修改 PDF 文件，但功能有限）或依賴后端服務來處理 PDF 文件的修改。

建議：

如果你的需求是實現功能完善的交互式批注工具，考慮到其復雜性，你可能需要：

深入研究 PDF.js 的底層 API 如何獲取批注信息，并結合 Canvas 或 SVG 繪圖技術自行實現批注的繪制和交互邏輯。
考慮使用第三方的 JavaScript PDF SDK 或庫，這些庫通常基于 PDF.js 或其他渲染引擎構建，并提供了開箱即用的批注創建、編輯和保存功能。一些庫聲稱與 PDF.js 兼容，或者提供了更高級的 API 來處理 PDF 文檔的結構和批注。