pdf.js使用方法整理，web页面中pdf在线查看，web页面显示pdf文档

本文链接：https://blog.youkuaiyun.com/tangkthh/article/details/88850016

本文详细介绍如何使用PDF.js插件在本地服务器环境下展示PDF文件。包括从官网或第三方源下载插件，将其部署到WAMP或XAMPP服务器，并通过iframe在网页上加载PDF文件的具体步骤。

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

pdf.js

使用步骤：

一、到官网下载 pdf.js 插件并解压 (地址: http://mozilla.github.io/pdf.js/ )

若官网无法下载，通过下面链接下载，注：作者有测试方法以及使用方法介绍，大家可以查看。

https://github.com/GleasonBian/PDFViewer（感谢作者）

二、下面介绍自己使用步骤：

1.需要本地服务器，这样方便自己开发中调试。通常使用wamp或xwamp

2.将pdf.js加入到自己的项目中的步骤。

可将 PDFViewer 解压后放到项目服务器根目录下(注意：项目服务器的根目录)

在项目中可以通过 <iframe src="服务器地址/web/viewer.html?file='你的PDF文件地址'">

// 例src路径：http://127.0.0.1/PDFViewer/web/viewer.html?file=http://127.0.0.1/files/documents/2019/03/5c7f94a24c3ce/5c99f79660da8.pdf
// 拼接pdf的src路径
var pdfSrc = currentWWWOrigin + '/PDFViewer/web/viewer.html?file=' + currentWWWOrigin + '/' + filePath; // pdf文件拼接成pdf.js需要的路径

注意查看代码注释

<div class="GMnone" id="pdfWrapper" style="z-index: 1; position: absolute; width: 70%; height: 95%; top: 50px; bottom: 0; overflow: hidden;">
    <iframe id="pdfContainer" frameborder="0" src="" width="100%" height="99%"></iframe>
</div>

// 记录自己开发的方法
function loadFileList() {
    $.ajax('/commit_file/getCommitFiles/' + documentId, {
        type: 'POST',
        dataType: 'json',
        success: function(res) {
            console.log(res);
            // 这里检查第一条数据是pdf走这里的逻辑
            if(!res.length) {
                return
            }
            var getFirst = res[0]; // 取到第一条数据
            var filePath = getFirst.filePath; // 获得文件路径
            var fileName = getFirst.filename; // 获得文件名，来判断文件后缀
            // 获得文件后缀
            var dot = fileName.lastIndexOf(".");
            var fileType = fileName.substr(dot);
            var typeCut = fileType;
            var fileSuffix = ""; // 文件后缀
            if(typeCut === ".jpg" || typeCut === ".gif" || typeCut === ".JPG" || typeCut === ".GIF" || typeCut === ".pdf" || typeCut === ".docx" || typeCut === ".doc") {
                fileSuffix = typeCut;
            }
            // 获取url域名地址,获取当前页面的域名
            var currentWWWOrigin = window.document.location.origin; 
            // pdf路径，这需要注意，路径"?"后面跟的是file=参数，参数就是你要打开的文件路径，可以看这个模拟路径，拼接需要的路径
            // http://127.0.0.1/PDFViewer/web/viewer.html?file=http://127.0.0.1/files/documents/2019/03/5c7f94a24c3ce/5c99f79660da8.pdf
            // 拼接pdf的src路径
            var pdfSrc = currentWWWOrigin + '/PDFViewer/web/viewer.html?file=' + currentWWWOrigin + '/' + filePath; // pdf文件拼接成pdf.js需要的路径
            if (fileSuffix === ".pdf") {
                $("#pdfWrapper").show();
                $("#pdfContainer").attr("src", pdfSrc); // 将路径填充到iframe的src里面
            } else {
                $("#pdfWrapper").hide();
            }
        }
    });
}

感谢作者：GleasonBian