关于html页面展现pdf文件，并隐藏打印、下载等按钮的总结

由于项目需求，要在页面预览pdf文件而不能提供下爱打印功能，故在网上查询了一些前辈的经验，自己也尝试了一番，现在讲经验总结一下。

pdfobject.js
jquery.media.js
pdf.js

一、 pdfobject.js

1.下载：https://pdfobject.com/
2.导入相关js

3.实例

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header">
</head>
<style type="text/css">#toolbarViewerRight{display: none;}html,body,#pdf_viewer{width: 100%;height: 100%;margin: 0;padding: 0;}</style>
<body class="gray-bg"><div id="pdf_viewer"></div><div th:include="include::footer"></div><script src="/js/pdfobject.js"></script><script type="text/javascript">if(PDFObject.supportsPDFs){// PDF嵌入到网页var options = {pdfOpenParams: { scrollbars: '0', toolbar: '0', statusbar: '0'}              //禁用工具栏代码};PDFObject.embed("/files/45b50092-ec22-457f-8a6e-b18d832d885b.pdf", "#pdf_viewer",options);} else {alert("浏览器不支持");}</script>
</body>
</html>

4.备注：有一点需要说明，在网上看到很多使用new PDFObject()方法创建的，但是尝试之后都是失败，并且网上提示使用设置“ pdfOpenParams: { scrollbars: ‘0’, toolbar: ‘0’, statusbar: ‘0’} ”来禁用下载打印功能也无效，不知是不是我使用有误

二、 jquery.media.js

下载js后直接导入

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>在线预览PDF文档</title>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.media.js"></script>
<script type="text/javascript">  $(function() {  $('a.media').media({width:800, height:600});  });
</script>
</head>
<body>
<center><div class="panel panel-primary"><div class="panel-heading" align="center"><h2>预览pdf文件</h2></div><div class="panel-body"><a class="media" href="yulan.pdf"></a>  </div>
</center>
</body>
</html>

备注：给js也无法做到屏蔽下载、打印按钮。

三、 pdf.js

pdf.js下载：https://mozilla.github.io/pdf.js/
关于pdf.js的来源就不做详解了，直接上代码

`导入之后，直接在js中调用

   function show(){var curWwwPath=window.document.location.href; var pathName=window.document.location.pathname; var pos=curWwwPath.indexOf(pathName); var localhostPath=curWwwPath.substring(0,pos); window.open(localhostPath+"/pdfjs/web/viewer.html?file=/files/fe34e38c-fb0f-450e-9bc8-3afc35101a80.pdf");
}`

备注：该方法可以屏蔽打印及下载的操作按钮，但是只能做到页面隐藏

关于html页面展现pdf文件，并隐藏打印、下载等按钮的总结相关推荐

iframe嵌入页面白屏_封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
在页面中嵌入PDF文件在上一篇<在html页面中嵌入其他页面的方法--零基础自学网页制作>(结尾见目录)中我们学习了如何在页面中嵌入其他页面的操作.今天我们来嵌入一个pdf文件. 其实使 ...
[html] 如何在页面打开PDF文件？
[html] 如何在页面打开PDF文件? 移动端如果是安卓的不太能实现直接打开PDF文件,需要使用pdfjs将pdf转换成canvas,再在页面上展示个人简介我是歌谣,欢迎和大家一起交流前后端知识 ...
java网页保存pdf_JavaScript+Java实现HTML页面转为PDF文件保存的方法
JavaScript+Java实现HTML页面转为PDF文件保存的方法发布于 2017-02-27 09:58:50 | 160 次阅读 | 评论: 0 | 来源: 网友投递 JavaScript客 ...
java 网页保存为pdf文件怎么打开方式_js相关：JavaScript+Java实现HTML页面转为PDF文件保存的方法...
js相关:JavaScript+Java实现HTML页面转为PDF文件保存的方法发布于 2020-8-12| 复制链接借助iText这个Java库,我们可以将HTML文件保存为图片文件进而转换成P ...
极速pdf文件打印时此计算机未连接到网络,PDF文件如何禁止打印？简单六步就能实现！！...
在我们的工作当中,我们除了一些平时经常会用到的word.excel.ppt等文件文档以外,PDF文件也是我们经常会用到的文档.因为PDF文件与其他文件相比,所展现出来的效果更好,观看起来的效果也就越好 ...
用PDFPrint进行PDF文件的批量打印
用PDFPrint进行PDF文件的批量打印一. 程序索取QQ:1980687127 二. 运行界面截图三. 使用说明(程序包含PDFPrint.exe PDFPrint.dll PDFPrintS ...
单张PPT转成单张PDF的PDF文件怎么设置打印出一页纸有6页PPT
感谢天津大学李森的技术帮助@atomer 常见的PPT可以在打印的时候设置的时候设置每页纸打印6页PPT(由于下面电脑没有连接打印机,所以没法设置打印页边距,导致现在的页边距比较宽,PPT页面和纸张大 ...
java从远程服务器获取PDF文件并后台打印（使用pdfFox）
一.java原生方式打印PDF文件正反面都打印,还未研究出只打印单面的方法,待解决 public static void printFile(String path) throws Exceptio ...
Nginx配置文件目录实现pdf文件预览及下载
默认情况下,通过nginx服务器来访问pdf文件,在浏览器上是会直接打开该pdf文件呈现内容的.如果想要访问pdf文件时,实现下载文件的效果,则需要在nginx服务端做一些配置. 以下配置只能下载 n ...

关于html页面展现pdf文件，并隐藏打印、下载等按钮的总结

关于html页面展现pdf文件，并隐藏打印、下载等按钮的总结

一、 pdfobject.js

二、 jquery.media.js

三、 pdf.js

关于html页面展现pdf文件，并隐藏打印、下载等按钮的总结相关推荐

最新文章

热门文章