扫描或导出文书后，PDF页或倒置，或横斜，或向失当。

不若手自重制文书，用户常需速法旋页，存其正者而已。

今之浏览器，直以JavaScript为之。

是篇所导，将筑基于浏览器之PDF旋器，用JavaScript为之。

此工具有以：许用户上载PDF之文，预览其页，旋选之页，易其向，生新PDF，预览终果，更名其文，并自浏览器直下载数端。

诸事皆在客户端行之，无后台服务器。

目次

1. PDF旋转之理

2. 项目之设

3. 吾等所恃之書庫何在？

4. 創製上傳之界

5. 預覽所上傳之PDF頁

6. 擇頁以旋轉

7. 施以旋轉之選

8. 生成旋轉之PDF

9. 預覽並下載終稿之PDF

10. 世間文書中，旋轉PDF之用何在？

11. 示范：PDF旋转器之运作

12. 现实应用之重要注记

13. 常犯之谬误应避

14. 结语

PDF旋转之运作

PDF旋转，乃更易其页向之数据也。

非手动更易其文，JavaScript之庠序可编程而旋其页，复出文书之新本。

瀛寰载PDF之文，察页之讯，施旋值若九十度、百八十度，或取横陈之姿，乃成新可下载之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;

是故，人得有以制其文之页何者当改。

今示其择页之制于工具中。

施转之选

既选诸页，用户可直于浏览器中施以异转之术

诸页可左旋九十度，右旋九十度，翻转一百八十度，或化而为竖版或横版之姿

今举一简例，用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旋转之器如何而用

步骤一：上传PDF

用户初将PDF文书，直上传于基于浏览器之器。

上传之域，既可拽曳，亦可手择文件。

此乃上传之界面，其状若此：

步骤二：预览PDF之页。

既上载文书，此器自能生页之预览。

预览之域，亦备旋转之选，俾用户可依所需旋其文书之页。

此乃器中预览之区：

第三步：设转之度

今用户可择PDF页当如何转旋。

此器所支者：

• 左旋

• 右旋

• 翻转一百八十度

• 竖置之向

• 横置之向

人亦得择转之施于众页抑或独于某页.

此乃转之设之面板其状若此.

第四步：生转之PDF.

既毕诸设，人击生之钮以施转.

浏览器于本地处之文，瞬息成新PDF。

此乃工具中之生成之钮：

第五步：预览终稿

经处理毕，工具直于浏览器中显其旋转之PDF预览。

用户可藉左右之控，逐页巡览，以验终稿。

界面亦示：

• 总页数

• 文件之巨细

• 输出文件名

此乃终篇预览之部也。

第六步：更名并下载PDF

下载之前，用户可直接于浏览器内更名所生成之PDF文件。

既更名，新文可立下载。

此乃更名与下载之部。

世事要诀

處理掃描所得之PDF，頁面方向之問題，頗為常見。

或有文書，其頁面方向雜糅，此或立體，彼或橫幅。

施以旋轉，逐頁更動，其效勝於盲然旋轉全文。

至於巨幅PDF，亦能延誤瀏覽器內之處理時日。

譬如：

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

又一善优化，乃预览页面，而后施永变。

此助用户验页之向，减误于下载新文之前。

盖因诸事皆于浏览器中运行，所上之文，永不离用户之器，是增隐密与安固。

常误之避

常误者，误转页数也。

譬如，连续施以两次九十度之旋转，或致方位骤变。

又一事，乃不先择页，而遽施旋转。

用户或误转全文，而非文档特定章节。

大幅扫描之PDF，亦能迟滞渲染与预览之生成。

于处理前验核所上传之文件，可避破败之流程：

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

预览同步之谬误，亦为常见之题。

若页面预览不因旋转而更新，用户或以为旋转失当，然导出之PDF实无讹。

每转一次即动态更新预览，则体验愈臻完美。

结语

是篇教程，尔以JavaScript成浏览器中PDF旋转变换器。

尔习知如何上载PDF文书，预览文页，旋转换选之页，易页向之姿，生更新之PDF，并直于浏览器中下载终成之文书。

尤重者，汝睹今世浏览器可于本地处理实用PDF编辑之事，不假后端服务器之助。

此法使器速且密，易用。

汝亦可于此试活器：AllInOneTools - PDF Rotator Tool。

既明此法，可更增其能，如PDF之析页、注解、文书之整序、数位之印信，或精微之修润之具.

是则事始入妙.