在HTML或React中实现PDF文件预览，想要不允许下载等如何设置呢？
在HTML或React中实现PDF文件预览且要隐藏下载等按钮，得使用pdf.js框架方案，诸如iframe等HTML标签方式都不行。
目前各大主流的浏览器都支持PDF文件预览查看，故可在HTML页面中直接预览PDF文件，常规有5种方法来实现。
一、A标签
A标签链接的常规用法是点击链接下载到本地电脑，有的浏览器中A标签链接是可以直接预览显示的，后可在PDF预览区域的工具栏按钮下载等操作。
<html>
<head>
<title>A PDF</title>
</head>
<body>
<a href="https://www.mahailushu.com/pdfjs/web/mine.pdf">Download PDF</a>
</body>
</html>二、embed标签
embed标签是内嵌HTML指定大小区域里面显示PDF文件，后可在PDF预览区域的工具栏按钮下载等操作。
<html>
<head>
<title>Embed PDF</title>
</head>
<body>
<embed src="https://www.mahailushu.com/pdfjs/web/mine.pdf" type="application/pdf" width=1000 height=800>
</body>
</html>三、object标签
object标签也是内嵌HTML指定大小区域里面显示PDF文件，后可在PDF预览区域的工具栏按钮下载等操作。
<html>
<head>
<title>Object PDF</title>
</head>
<body>
<object data="https://www.mahailushu.com/pdfjs/web/mine.pdf" type="application/pdf" width=1000 height=800>
</body>
</html>四、iframe标签
iframe标签也是内嵌HTML指定大小区域里面显示PDF文件，后可在PDF预览区域的工具栏按钮下载等操作。
<html>
<head>
<title>Object PDF</title>
</head>
<body>
<iframe src="https://www.mahailushu.com/pdfjs/web/mine.pdf" width=1000 height=800>
</body>
</html>五、pdf.js框架
目前pdf.js框架是最推荐使用的PDF预览方式，它是利用js语言兼容统一地预览pdf文件。如果想让PDF不想下载等操作的话，仅需在view.html中将下载按钮隐藏或删除，而前面四种标签方式的下载按钮就无法取消；即使有的说在链接后面添加“#toolbar=0”也是无效的。
请点击 这里 访问pdf.js框架官网，如下图点击Download下载框架安装包：
进入下载页面，如下图：
下载得到压缩包，如下图：
在静态网站中以HTML页面方式直接访问预览PDF文件，仅需把上述文件夹复制与部署到Web应用服务器目录下，假定其访问链接URL为https://www.mahailushu.com/pdfjs/web/viewer.html，那么直接可在浏览器中访问，如下地址：
https://www.mahailushu.com/pdfjs/web/viewer.html?file=https://www.mahailushu.com/pdfjs/web/mine.pdf 在浏览器中访问，PDF预览如下：
大家有没有发现，顶部都有按钮操作栏，包括下载、打印等；如果想要不显示这些按钮，如何操作呢？
如上图红框标注，把左右按钮栏隐藏即可。
最后，说下如何在Ant Design in React框架中实现PDF预览且不显示下载等按钮，操作过程如下：
- 复制pdfjs目录到项目的public目录下
2. 修改viewer.html，隐藏下载等按钮
3. 假定URL地址为https://www.mahailushu.com/pdfjs/viewer.html?file=https://www.mahailushu.com/mine.pdf ，前者viewer.html和mine.pdf都是在相同域名下，那上面方法就可以啦。然而，如果这两个都域名不一样的话，即跨越访问，那么，需修改viewer.js文件，注释掉跨越限制。
4. 在react页面中，以iframe标签嵌入PDF访问地址，即如下：
<iframe src="https://www.mahailushu.com/pdfjs/web/viewer.html?file=https://www.mahailushu.com/pdfjs/web/mine.pdf" width=1000 height=800>react代码片段如下：
如此一来，无下载等按钮的PDF预览功能需求即做到了。
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
2
2- 0
已为社区贡献1条内容
所有评论(0)