目前各大主流的浏览器都支持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预览功能需求即做到了。