掃描或匯出文件後，PDF 頁面有時會顛倒、橫放或方向錯誤。

與其手動重新建立文件，使用者通常只需要一個快速旋轉頁面並保存正確版本的方法。

現代瀏覽器可透過 JavaScript 直接實現這個功能。

在本教學中，你將使用 JavaScript 建立一個瀏覽器基礎的 PDF 旋轉工具。

這個工具將允許用戶上傳 PDF 檔案、預覽頁面、旋轉選定的頁面、更改方向、產生更新的 PDF、預覽最終結果、重新命名檔案，並且可以直接從瀏覽器下載所有內容.

所有功能完全在客戶端運行，不需要後端伺服器.

目錄

1. PDF 旋轉功能介紹

2. 專案設定

3. 我們正在使用哪個圖書館？

4. 建立上傳介面

5. 預覽上傳的 PDF 頁面

6. 選擇要旋轉的頁面

7. 應用旋轉選項

8. 產生旋轉的 PDF

9. 預覽並下載最終的 PDF

10. 為何在實際文件中旋轉 PDF 很有用

11. 示範：PDF 旋轉工具如何運作

12. 來自實際使用的重點注意事項

13. 常見錯誤避免

14. 結論

PDF 旋轉如何運作

PDF 旋轉透過更新 PDF 頁面的方向數據來運作

除了手動修改實際內容外，JavaScript 庫可以程式化旋轉頁面並導出一個更新版本的文件.

瀏覽器載入 PDF 檔案，讀取頁面資訊，應用旋轉值如 90°、180° 或橫向，然後產生一個新的可下載 PDF.

所有操作都在瀏覽器內直接完成。

這讓流程保持快速、私密且易於使用，無需將檔案上傳至外部伺服器.

專案設定

此專案故意設計得簡單.

您只需要一個HTML檔案、一個JavaScript檔案以及一個PDF處理函式庫.

所有內容都在瀏覽器內完全使用JavaScript運行。不需要後端伺服器或資料庫。

我們正在使用哪個圖書館？

我們將使用 PDF-lib 圖書館，以便在瀏覽器中直接編輯 PDF 文件。

透過 CDN 添加它：

<script src="https://unpkg.com/pdf-lib/dist/pdf-lib.min.js"></script>

這個圖書館允許我們：

• 載入 PDF 文件

• 旋轉頁面

• 修改方向

• 導出更新後的 PDF 文件

建立上傳介面

從基本的上傳輸入開始：

<input type="file" id="pdfUpload" accept="application/pdf">

<button onclick="rotatePDF()">
  Rotate PDF
</button>

這允許用戶直接從瀏覽器上傳 PDF 檔案。

這是工具內的上傳區域看起來像什麼：

預覽上傳的 PDF 頁面

在上傳 PDF 檔案後，用戶可以在應用旋轉之前直接在瀏覽器內預覽頁面。

預覽區域也包含旋轉控制，讓用戶可以在生成最終 PDF 之前按需個別旋轉頁面。

為了渲染預覽，我們首先載入上傳的 PDF 文件：

const pdfDoc = await PDFLib.PDFDocument.load(arrayBuffer);

const totalPages = pdfDoc.getPageCount();

接下來，我們動態渲染頁面預覽：

for (let i = 0; i < totalPages; i++) {
  const page = pdfDoc.getPage(i);

  console.log("Rendering page:", i + 1);
}

用戶可以使用左右導航按鈕在頁面之間切換。

旋轉按鈕也可以附加到每張預覽卡片上：

rotateLeftBtn.addEventListener("click", () => {
  rotatePage(currentPage, -90);
});

rotateRightBtn.addEventListener("click", () => {
  rotatePage(currentPage, 90);
});

這讓在產生更新 PDF 之前驗證頁面方向變得更容易

這是頁面預覽區域看起來的樣子

選擇要旋轉的頁面

並非每份文件都需要所有頁面旋轉

有些使用者可能只希望旋轉偶數頁、奇數頁，或文件中的特定頁面

該工具允許使用者選擇哪些頁面應該接收旋轉變更，在生成最終 PDF 之前

例如，使用者可以這樣選擇旋轉範圍：

const selectedMode = document.querySelector(
  'input[name="pageMode"]:checked'
).value;

也支援特定的頁面範圍：

const customPages = document
  .getElementById("customPages")
  .value;

這讓使用者能更控制哪些文件頁面被修改

這是工具內頁面選擇控制的樣子：

應用旋轉選項

選擇頁面後，用戶可以直接在瀏覽器內應用不同的旋轉操作

頁面可以順時針旋轉90度，逆時針旋轉90度，翻轉180度，或轉換為縱向或橫向佈局

這裡有一個使用PDF-lib的簡單示例

const page = pdfDoc.getPage(pageIndex);

page.setRotation(
  PDFLib.degrees(90)
);

要順時針旋轉頁面：

page.setRotation(
  PDFLib.degrees(-90)
);

您可以動態套用方向預設設定：

if (orientation === "landscape") {
  page.setRotation(PDFLib.degrees(90));
}

這些控制項允許用戶直接在瀏覽器內修復掃描的文件和錯誤的頁面佈局。

這裡是工具內旋轉控制項的樣式：

生成旋轉的 PDF

在旋轉設置配置完成後，用戶可以直接在瀏覽器內生成更新後的 PDF。

該工具處理選定的頁面，應用旋轉變更，並立即導出一個可下載的 PDF 檔案。

例如：

const pdfBytes = await pdfDoc.save();

接下來，建立一個可下載的檔案：

const blob = new Blob(
  [pdfBytes],
  { type: "application/pdf" }
);

const url = URL.createObjectURL(blob);

最後，觸發下載：

const link = document.createElement("a");

link.href = url;
link.download = "rotated-document.pdf";

link.click();

這個整個工作流程在瀏覽器內部本地運行，無需後端伺服器。

這是工具內生成按鈕的樣子：

預覽及下載最終PDF

處理完成後，該工具會顯示旋轉文件的即時預覽

用戶可以在下載最終文件前審閱更新頁面

介面也顯示額外的文件細節，例如總頁數和文件大小

在下載生成的PDF之前，提供重命名選項

例如，用戶可以這樣重命名檔案：

const fileName = prompt(
  "Enter PDF name:",
  "rotated-document"
);

預覽區域也包含左右導航控制，以便用戶可以直接在瀏覽器中瀏覽旋轉的頁面。

文件詳情也可以動態顯示：

fileSizeElement.textContent =
  formatFileSize(blob.size);

pageCountElement.textContent =
  pdfDoc.getPageCount();

這提高了可用性，並幫助用戶在下載前驗證最終輸出。

最終輸出區域看起來像這樣：

為何旋轉 PDF 文件對實際文件處理有用

PDF 旋轉雖然看似是一個小功能，但它解決了日常文件處理中非常普遍的一個問題

許多掃描文件、移動掃描、發票、證書和辦公文件保存時方向錯誤。有些頁面顯示為橫向、倒置，或者混合了直立和橫向佈局。

用戶不必重新打開和掃描那些檔案，可以直接在瀏覽器內快速修復頁面方向。

例如，PDF 旋轉常見於：

• 掃描的協議

• 發票和帳單

• 政府表格

• 學術文件

• 建築圖紙

• 風景報告

• 手機相機掃描

當處理多頁PDF時，這特別有用，僅僅需要修正某些頁面

一些用戶可能只想要旋轉：

• 偶數頁

• 奇數頁

• 特定頁面

• 僅限橫向頁面

這就是為什麼在現代PDF工具中，基於頁面的旋轉控制很重要。

基於瀏覽器的PDF旋轉也提高了隱私性，因為上傳的文件會留在用戶的設備上，而不是發送到外部伺服器。

示範：PDF旋轉工具如何運作

步驟1：上傳PDF

用戶首先將PDF文件直接上傳到基於瀏覽器的工具。

上傳區域支援拖曳放置以及手動選擇檔案.

這是上傳介面的樣子：

步驟 2：預覽 PDF 頁面

上傳文件後，工具會自動產生頁面預覽.

預覽區域也包含旋轉選項，讓使用者可以根據需求旋轉文件頁面。

這是工具內的預覽區域：

步驟 3：設定旋轉設定

用戶現在可以選擇 PDF 頁面如何旋轉.

該工具支援：

• 向左旋轉

• 向右旋轉

• 翻轉 180 度

• 縱向佈局

• 橫向佈局

用戶也可以選擇旋轉是否適用於所有頁面或僅僅是某些頁面.

這是旋轉設置面板的樣子:

步驟 4: 生成旋轉 PDF

一旦所有設置完成，用戶點擊生成按鈕來應用旋轉.

瀏覽器在本地處理文件並立即創建更新後的 PDF。

工具裡的產生按鈕這樣：

步驟 5：預覽最終輸出

處理完成後，工具會直接在瀏覽器裡顯示旋轉的 PDF 預覽。

用戶可以使用左右控制按鈕逐頁瀏覽來驗證最終輸出。

介面還顯示：

• 總頁數

• 檔案大小

• 輸出檔案名稱

這是最終預覽區域：

步驟 6：重新命名並下載 PDF

在下載前，用戶可以直接在瀏覽器中重新命名產生的 PDF 檔案

重新命名後，可以立即下載更新後的文件

這是重新命名和下載區域：

來自真實世界使用的重點注意事項

當處理掃描的 PDF 檔案時，頁面方向問題非常常見.

有些文件可能包含混合方向，其中某些頁面是直立的，而其他頁面是橫向的.

逐頁應用旋轉變化通常比盲目旋轉整個文件效果更好.

大型 PDF 檔案也會增加瀏覽器內的處理時間.

例如：

if (file.size > 50 * 1024 * 1024) {
  alert("Large PDF files may process slowly.");
}

另一個有用的優化是應用永久變更前預覽頁面

這能幫助用戶驗證頁面方向並在下載更新文件前減少錯誤

由於所有操作都在瀏覽器本地運行，上傳的文件從不離開用戶的設備，這增強了隱私和安全

常見錯誤避免

一個常見的錯誤是無意中多次旋轉頁面

例如，連續應用兩次90度旋轉可能導致不可預期的方向變化

另一個問題是應用旋轉之前忽略頁面選擇

用戶可能無意中旋轉所有頁面而不是文檔的特定部分

大型掃描 PDF 檔案也可能會延緩渲染和預覽產生的速度.

在處理前驗證上傳的檔案有助於避免中斷的工作流程：

if (!file || file.type !== "application/pdf") {
  alert("Please upload a valid PDF file.");
  return;
}

預覽同步不正確是另一個常見問題.

如果頁面預覽在旋轉後沒有更新，使用者可能會認為旋轉失敗了，儘管輸出的 PDF 是正確的。

每次旋轉後動態更新預覽可提升整體體驗

結論

在本教學中，你使用 JavaScript 建立了一個基於瀏覽器的 PDF 旋轉器

你學習了如何上傳 PDF 檔案、預覽文件頁面、旋轉選定頁面、更改頁面方向、產生更新後的 PDF，並直接在瀏覽器內下載最終文件。

更重要的，你看到了現代瀏覽器如何能在不需要後端伺服器的情況下，本地上處理實用的 PDF 編輯任務。

這種方法讓工具保持快速、隱私且易於使用。

你也可以這裡嘗試這個實時工具：AllInOneTools - PDF 旋轉工具。

一旦您理解這個工作流程，您就可以透過 PDF 頁面提取、註釋、文件組織、數位簽名或先進編輯工具等特色來擴展它.

而這就是事情開始變得真正有趣的地方.