用js，pdf.js在html中展示pdf文件_html pdf.js插件下载-CSDN博客

本文链接：https://blog.csdn.net/qq_45358768/article/details/130298273

该文章演示了如何利用JavaScript库pdf.js在HTML环境中展示PDF文件。它涉及到canvas元素的使用，以及对PDF文档的获取、解析和渲染过程。文章提供了从加载PDF到实现页面导航的完整代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用js，pdf.js在html中展示pdf文件

下载pdf.js插件下载地址

下载新版本浏览器需要的

文件结构

创建pdfjs文件夹，把下载的包解压到pdfjs文件夹里面

pdf.html 文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>pdf</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="icon" href="data:;base64,=">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="./pdfjs/build/pdf.js"></script>
    <script src="./pdfjs/build/pdf.worker.js"></script>
    <script src="./pdf.js"></script>
</head>
<style type="text/css">
    .close-pdf {
        position: fixed;
        top: 20px;
        right: 20px;
        color: #1d69b3;
    }

    button {
        width: 40px;
        border: none;
        background: none;
        color: #1d69b3;
        font-size: 20px;
        outline: none;
    }

    .control {
        position: fixed;
        bottom: 20px;
        left: 50%;
        margin-left: -140px;
    }

    .control span {
        color: #1d69b3;
        font-size: 16px;
        line-height: 30px;
    }
</style>

<body>
    <canvas id="myCanvas"></canvas>
    <canvas id="canvas" style="width: 100%;height: 95%;"></canvas>
    <div class="control">
        <button id="first" onclick="onFirstPage()"><i class="fa fa-angle-double-left"></i></button>
        &nbsp; &nbsp;
        <button id="prev" onclick="onPrevPage()"><i class="fa fa-angle-left"></i></button>
        &nbsp; &nbsp;
        <span><span id="page_num"></span> / <span id="page_count"></span></span>
        &nbsp; &nbsp;
        <button id="next" onclick="onNextPage()"><i class="fa fa-angle-right"></i></button>
        &nbsp; &nbsp;
        <button id="final" onclick="onFinalPage()"><i class="fa fa-angle-double-right"></i></button>
    </div>
</body>

</html>

pdf.js 文件

const url = 'public/paijian.pdf' //想要预览的pdf文件地址，可以相对路径也可以是绝对路径
var pdfDoc = null
var pageNum = 1
var pageRendering = false
var pageNumPending = null
const scale = 2 //调节预览文件的清晰度


/**
    * Get page info from document, resize canvas accordingly, and render page.
    * @param num Page number.
    */
function renderPage(num) {

    pageRendering = true;
    // Using promise to fetch the page
    pdfDoc.getPage(num).then(function (page) {
        var viewport = page.getViewport({ scale });
        var canvas = document.getElementById('canvas')
        var ctx = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        // Render PDF page into canvas context
        var renderContext = {
            canvasContext: ctx,
            viewport: viewport
        };
        var renderTask = page.render(renderContext);

        // Wait for rendering to finish
        renderTask.promise.then(function () {
            pageRendering = false;
            if (pageNumPending !== null) {
                // New page rendering is pending
                renderPage(pageNumPending);
                pageNumPending = null;
            }
        });
    });

    // Update page counters
    document.getElementById('page_num').textContent = num;
}

/**
    * If another page rendering in progress, waits until the rendering is
    * finised. Otherwise, executes rendering immediately.
    */
function queueRenderPage(num) {
    if (pageRendering) {
        pageNumPending = num;
    } else {
        renderPage(num);
    }
}

/**
    * Displays previous page.
    */
function onPrevPage() {
    if (pageNum <= 1) {
        return;
    }
    pageNum--;
    queueRenderPage(pageNum);
}


/**
    * Displays next page.
    */
function onNextPage() {
    if (pageNum >= pdfDoc.numPages) {
        return;
    }
    pageNum++;
    queueRenderPage(pageNum);
}

/**
    * Displays first page.
    */
function onFirstPage() {
    if (pageNum <= 1) {
        return;
    }
    pageNum = 1;
    queueRenderPage(pageNum);
}

/**
    * Displays final page.
    */
function onFinalPage() {
    if (pageNum >= pdfDoc.numPages) {
        return;
    }
    pageNum = pdfDoc.numPages;
    queueRenderPage(pageNum);
}
/**
    * Asynchronously downloads PDF.
    */
let loadingTask = pdfjsLib.getDocument(url)
loadingTask.promise.then(function (pdfDoc_) {
    pdfDoc = pdfDoc_;
    document.getElementById('page_count').textContent = pdfDoc.numPages;

    // Initial/first page rendering
    renderPage(pageNum);
});