“`html
簡介
pdf.js 是一個用戶端的 JavaScript 函式庫，用於在網頁中顯示 PDF 文件。它由 Mozilla 推出，旨在通過 HTML5 技術實現高效能的 PDF 閱讀器。這篇教學將介紹如何在你的網頁中使用 pdf.js，以及一些常見的操作。
基本安裝與設置
載入 PDF.js
要在網頁中使用 pdf.js，你需要首先下載這個庫。我們可以選擇使用 CDN 版本，這樣可以避免下載和本地部署：
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js"></script>
基本 HTML 結構
接下來，我們需要在 HTML 中添加一些基本的元素以便顯示 PDF 文件：
<canvas id="pdf-canvas"></canvas>
<div id="page-loader">載入中...</div>
<div id="navigation">
<button id="prev-page">上一頁</button>
<button id="next-page">下一頁</button>
</div>
初始化 PDF.js
在 JavaScript 文件中，我們需要初始化 PDF.js 並加載目標 PDF 文件：
const url = 'your-pdf-file.pdf';
let pdfDoc = null,
pageNum = 1,
pageRendering = false,
pageNumPending = null,
scale = 1.0,
canvas = document.getElementById('pdf-canvas'),
ctx = canvas.getContext('2d');
pdfjsLib.getDocument(url).promise.then(function (pdfDoc_) {
pdfDoc = pdfDoc_;
document.getElementById('page-count').textContent = pdfDoc.numPages;
renderPage(pageNum);
});
渲染 PDF 頁面
渲染函式
我們需要一個渲染頁面的函式，該函式負責將 PDF 的某一頁渲染到 canvas 上：
function renderPage(num) {
pageRendering = true;
pdfDoc.getPage(num).then(function (page) {
let viewport = page.getViewport({ scale: scale });
canvas.height = viewport.height;
canvas.width = viewport.width;
let renderContext = {
canvasContext: ctx,
viewport: viewport
};
let renderTask = page.render(renderContext);
renderTask.promise.then(function () {
pageRendering = false;
if (pageNumPending !== null) {
renderPage(pageNumPending);
pageNumPending = null;
}
});
});
document.getElementById('page-num').textContent = num;
}
頁面切換
我們再添加上一頁和下一頁的操作：
document.getElementById('prev-page').addEventListener('click', function() {
if (pageNum <= 1) {
return;
}
pageNum--;
queueRenderPage(pageNum);
});
document.getElementById('next-page').addEventListener('click', function() {
if (pageNum >= pdfDoc.numPages) {
return;
}
pageNum++;
queueRenderPage(pageNum);
});
function queueRenderPage(num) {
if (pageRendering) {
pageNumPending = num;
} else {
renderPage(num);
}
}
結語
以上就是使用 pdf.js 在網頁中顯示 PDF 文件的基本步驟。我們介紹了如何載入 PDF.js、初始化並渲染 PDF 頁面，以及實現基本的頁面切換功能。pdf.js 是一個功能強大的工具，還有許多進階功能等待開發者探索與應用。
“`
