pdf js viewer怎么打开

使用PDF.js Viewer打开PDF文件的方法有几种：下载并引入PDF.js库、配置Viewer，设置PDF文件路径。其中，下载并引入PDF.js库是最基本的一步，详细步骤如下。

PDF.js是一个开源的JavaScript库，用于在网页中显示PDF文件。它由Mozilla开发并维护，广泛应用于各种网络项目。本文将详细介绍如何使用PDF.js Viewer打开PDF文件，从下载库到配置Viewer，再到设置PDF文件路径，帮助你快速上手并实现PDF文件的在线浏览。

一、下载并引入PDF.js库

下载PDF.js库

首先，你需要下载PDF.js库。可以通过访问PDF.js的GitHub页面下载最新版本的库文件。下载后解压，将pdf.js和pdf.worker.js两个主要文件放到你的项目目录中。

引入PDF.js库

在你的HTML文件中，通过<script>标签引入pdf.js和pdf.worker.js文件。这些文件是PDF.js运行的核心，确保它们正确加载是非常重要的一步。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PDF.js Viewer Example</title>
</head>
<body>
    <!-- PDF.js Viewer Container -->
    <div id="pdf-viewer"></div>
    <!-- 引入PDF.js库 -->
    <script src="path/to/pdf.js"></script>
    <script src="path/to/pdf.worker.js"></script>
</body>
</html>

二、配置Viewer

创建Viewer容器

在你的HTML文件中，创建一个容器用于显示PDF文件。可以使用一个简单的<div>标签作为容器。这个容器将用来显示PDF页面。

<div id="pdf-viewer"></div>

初始化PDF.js

在你的JavaScript代码中，初始化PDF.js并配置Viewer。你需要创建一个函数来加载和显示PDF文件。PDF.js提供了一些API函数，可以帮助你完成这个任务。

document.addEventListener("DOMContentLoaded", function () {
    const url = 'path/to/your/pdf-file.pdf';
    const loadingTask = pdfjsLib.getDocument(url);
    loadingTask.promise.then(function (pdf) {
        console.log('PDF loaded');
        // Fetch the first page
        const pageNumber = 1;
        pdf.getPage(pageNumber).then(function (page) {
            console.log('Page loaded');
            const scale = 1.5;
            const viewport = page.getViewport({ scale: scale });
            // Prepare canvas using PDF page dimensions
            const canvas = document.getElementById('pdf-viewer');
            const context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            // Render PDF page into canvas context
            const renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            const renderTask = page.render(renderContext);
            renderTask.promise.then(function () {
                console.log('Page rendered');
            });
        });
    }, function (reason) {
        console.error(reason);
    });
});

三、设置PDF文件路径

动态设置文件路径

在实际应用中，PDF文件的路径可能是动态的。你可以通过JavaScript代码来动态设置PDF文件的路径。比如，通过从服务器获取文件路径或者用户上传文件等方式。

const url = 'path/to/your/pdf-file.pdf'; // 动态设置路径

四、其他高级功能

添加分页功能

在实际项目中，你可能需要添加分页功能。可以通过PDF.js提供的API来实现分页。你可以创建一个分页控件，允许用户翻页。

let currentPage = 1;
const pdfDoc = null;
function renderPage(pageNum) {
    pdfDoc.getPage(pageNum).then(function (page) {
        const scale = 1.5;
        const viewport = page.getViewport({ scale: scale });
        const canvas = document.getElementById('pdf-viewer');
        const context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        const renderContext = {
            canvasContext: context,
            viewport: viewport
        };
        const renderTask = page.render(renderContext);
        renderTask.promise.then(function () {
            console.log('Page rendered');
        });
    });
}
document.getElementById('prev-page').addEventListener('click', function () {
    if (currentPage <= 1) return;
    currentPage--;
    renderPage(currentPage);
});
document.getElementById('next-page').addEventListener('click', function () {
    if (currentPage >= pdfDoc.numPages) return;
    currentPage++;
    renderPage(currentPage);
});
pdfjsLib.getDocument(url).promise.then(function (pdfDoc_) {
    pdfDoc = pdfDoc_;
    renderPage(currentPage);
});

添加缩放功能

PDF.js还支持缩放功能，可以让用户放大或者缩小PDF页面。你可以添加一个缩放控件，通过改变缩放比例来实现这一功能。

let scale = 1.5;
document.getElementById('zoom-in').addEventListener('click', function () {
    scale += 0.1;
    renderPage(currentPage);
});
document.getElementById('zoom-out').addEventListener('click', function () {
    if (scale <= 0.5) return;
    scale -= 0.1;
    renderPage(currentPage);
});
function renderPage(pageNum) {
    pdfDoc.getPage(pageNum).then(function (page) {
        const viewport = page.getViewport({ scale: scale });
        const canvas = document.getElementById('pdf-viewer');
        const context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        const renderContext = {
            canvasContext: context,
            viewport: viewport
        };
        const renderTask = page.render(renderContext);
        renderTask.promise.then(function () {
            console.log('Page rendered');
        });
    });
}

五、总结

通过以上步骤，你可以使用PDF.js Viewer打开PDF文件并实现分页、缩放等功能。PDF.js是一个强大的工具，能够帮助你在网页中实现PDF文件的浏览和操作。希望这篇文章能帮助你快速上手PDF.js并实现自己的需求。如果你需要更多的功能，可以参考PDF.js的官方文档获取更多详细信息。