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

关于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;
     
  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
可以通过在 iframe 中嵌入 PDF 文件时,使用一些特定的参数来控制 PDF 文件的显示。具体来说,可以使用 PDF.js 的 web/viewer.html 页面来实现这个功能。 具体的步骤如下: 1. 下载 PDF.js 库,并将其解压到你的项目中。 2. 在你的 HTML 页面中,添加一个 iframe 标签,用于显示 PDF 文件: ```html <iframe id="pdf-iframe" src="pdfjs/web/viewer.html?file=example.pdf"></iframe> ``` 其中,src 属性中的 file 参数指定了要显示的 PDF 文件的路径。 3. 在 JavaScript 中,通过获取 iframe 的 contentWindow 和 contentDocument 属性,来控制 PDF 文件的显示。具体来说,可以通过以下代码隐藏 PDF 文件中的工具栏和菜单栏: ```javascript const iframe = document.getElementById('pdf-iframe'); const contentWindow = iframe.contentWindow; const contentDocument = contentWindow.document; contentWindow.PDFViewerApplication.hideToolbar(); contentWindow.PDFViewerApplication.contextMenuItems = []; ``` 其中,PDFViewerApplication 是 PDF.js 库中的一个全局对象,可以用来控制 PDF 文件的显示。hideToolbar 方法可以隐藏 PDF 文件中的工具栏,contextMenuItems 属性可以用来控制 PDF 文件中的菜单栏。 4. 最后,你需要在 CSS 中设置 iframe 的样式,使其填充整个页面: ```css #pdf-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; margin: 0; padding: 0; } ``` 这样,你就可以在前端页面使用 iframe 展示 PDF 文件,并且隐藏下载打印按钮,仅展示 PDF 内容了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值