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

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

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

pdf.js使用方法
应各位博友要求已经取消付费 2022.3.20 项目中显示 pdf 的功能,浏览过不少的技术帖,都不太理想,花了点时间研究了下pdf.js正确使用方法,总结下:1.防止自己忘记 2.工作留有痕迹 3 ...
doc自动生成html,java web应用中自动生成文章html页面的实现.doc
java web应用中自动生成文章html页面的实现 java web应用中自动生成文章html页面的实现 2009-11-09 00:24:15 标签:web开发,页面转换 [推送到技术圈] 版权声 ...
不使用 Maven 等构建工具，而使用原始方法在 IntelliJ IDEA 中整合 Tomcat 部署 Web 应用
不使用 Maven 等构建工具,而使用原始方法在 IntelliJ IDEA 中整合 Tomcat 部署 Web 应用我们知道,部署 Web 应用可以直接将 Web 应用的文件夹置于 Tomca ...
html引用c 变量,在jsp页面中定义全局变量,供其他页面引用
一.在一个jsp中引用另一个jsp的方法有: 1.使用 jsp include指令(常用): file属性是必填的(绝对或相对路径),但它不支持任何的表达式,也不允许通过?挂参方式来传递参数. 注意: ...
HTML5怎么编辑另一个页面,html中嵌套iframe页面如何将一个html页面中嵌入另一个html页面...
如何将一个html页面中嵌入另一个html页面将一个html页面中嵌入另一个html页面需要使用到iframe标签. iframe标签用法: scrolling禁止鼠标滑动,frameborder嵌 ...
iframe子页面内刷新父页面中另一个iframe子页面
框架页面如下: <div id="aa" style="float: left; height: 500px; border-right-style: solid; ...
html5 载入另一个页面,如何将一个html页面中嵌入另一个html页面
将一个html页面中嵌入另一个html页面需要使用到iframe标签. iframe标签用法: scrolling禁止鼠标滑动,frameborder嵌套页面边框,leftmargin左边距,topm ...
HTML页面中使两个div并排显示如何实现
本文主要介绍了HTML页面中使两个div并排显示的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着微点阅读小编来一起学习学习吧在HTML中实现两 ...
iframe框架一个页面中嵌套到另外一个页面
在一个页面中嵌套另外一个页面,就要使用到框架<iframe> 标签.<iframe> 标签规定一个内联框架.一个内联框架被用来在当前 HTML 文档中嵌入另一个文档. 基本语法 ...

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

pdf.js

使用步骤：

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

最新文章

热门文章