搜尋
Close this search box.

了解與應用:深入解析PDF.js的實用教學

PDF.js 教學 | 打造互動型 PDF 瀏覽器插件的詳細指南,包含安裝、配置與使用範例,讓你輕鬆嵌入 PDF 查看功能於網站中。

讓資訊整合更靈活

台灣熱門!AI+文檔+團隊Wiki+專案管理+日曆 — Notion帶來更靈活的工作方式!
免費使用

線上PDF文檔處理!

全球超過1億用戶實現文檔自動化處理。創建、編輯、簽署和分享PDF文件。簡便的表單填寫和文件管理功能,適合個人和企業使用。
免費試用

200+模板自動化工作流程

全球500強公司、22.5萬用戶都在用!全面整合專案處理、銷售、行銷、產品團隊工作流程!
免費使用

AI智能團隊協作

全球兩百萬團隊都在用!全面合作+生產力平台,高端智能工具,助你快速完成工作!
免費使用

“`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 是一個功能強大的工具,還有許多進階功能等待開發者探索與應用。

“`

站長推薦文章

相關文章

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *