目前各大主流的浏览器都支持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下载框架安装包:

html5 查看pdf 翻页 pdf html预览_pdf

进入下载页面,如下图:

html5 查看pdf 翻页 pdf html预览_pdf_02

下载得到压缩包,如下图:

html5 查看pdf 翻页 pdf html预览_react.js_03

在静态网站中以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预览如下:

html5 查看pdf 翻页 pdf html预览_pdf_04

大家有没有发现,顶部都有按钮操作栏,包括下载、打印等;如果想要不显示这些按钮,如何操作呢?

html5 查看pdf 翻页 pdf html预览_html5 查看pdf 翻页_05

如上图红框标注,把左右按钮栏隐藏即可。

最后,说下如何在Ant Design in React框架中实现PDF预览且不显示下载等按钮,操作过程如下:

  1. 复制pdfjs目录到项目的public目录下

html5 查看pdf 翻页 pdf html预览_react.js_03

html5 查看pdf 翻页 pdf html预览_HTML_07

2. 修改viewer.html,隐藏下载等按钮

html5 查看pdf 翻页 pdf html预览_HTML_08

html5 查看pdf 翻页 pdf html预览_html5 查看pdf 翻页_05

3. 假定URL地址为https://www.mahailushu.com/pdfjs/viewer.html?file=https://www.mahailushu.com/mine.pdf ,前者viewer.html和mine.pdf都是在相同域名下,那上面方法就可以啦。然而,如果这两个都域名不一样的话,即跨越访问,那么,需修改viewer.js文件,注释掉跨越限制。

html5 查看pdf 翻页 pdf html预览_react.js_10

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代码片段如下:

html5 查看pdf 翻页 pdf html预览_html_11

如此一来,无下载等按钮的PDF预览功能需求即做到了。