方案一 `hexo-pdf` {#方案一-hexo-pdf}

安装 hexo-pdf 插件

|-----------|-------------------------------------| | 1 | npm install --save hexo-pdf |

官网：https://github.com/superalsrk/hexo-pdf

使用方法：

|-----------|--------------------------------| | 1 | {% pdf <url-to-pdf> %} |

该方法可以方便地在hexo PC端嵌入PDF，弊端是手机端无法正常显示页面。

方案二 `<iframe>` {#方案二-lt-iframe-gt}

所有浏览器都支持 <iframe> 标签，直接将src设置为指定的PDF文件就可以预览了。

此外可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器，比如下面的代码可以提供一个PDF的下载链接：

|-------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 | <iframe src="/index.pdf" width="100%" height="100%"> This browser does not support PDFs. Please download the PDF to view it: <a href="/index.pdf">Download PDF</a> </iframe> |

可以在PC端显示，手机端无法显示，进入页面会自动跳入下载pdf文件，并不好用。

方案三 `<embed>` {#方案三-lt-embed-gt}

<embed> 标签定义嵌入的内容。

|-----------|------------------------------------------------------------------------------------| | 1 | <embed src="/index.pdf" type="application/pdf" width="100%" height="100%"> |

可以在PC端显示，手机端无法显示。

方案四 `<object>` {#方案四-lt-object-gt}

<object>定义一个嵌入的对象，请使用此元素向页面添加多媒体。此元素允许您规定插入 HTML 文档中的对象的数据和参数，以及可用来显示和操作数据的代码。用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。几乎所有主流浏览器都拥有部分对 <object> 标签的支持。这个标签在这里的用法和<iframe>很像，也支持回退。

|-------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 | <object data="/index.php" type="application/pdf" width="100%" height="100%"> This browser does not support PDFs. Please download the PDF to view it: <a href="/index.pdf">Download PDF</a> </object> |

当然，结合<object>和<iframe>能提供一个更强大的回退方案：

|---------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 | <object data="/index.pdf" type="application/pdf" width="100%" height="100%"> <iframe src="/index.pdf" width="100%" height="100%" style="border: none;"> This browser does not support PDFs. Please download the PDF to view it: <a href="/index.pdf">Download PDF</a> </iframe> </object> |

缺点：手机端不支持该方案

方案五 `pdf.js` {#方案五-pdf-js}

全平台查看PDF解决方案

使用方法

下载 pdf.js
官网地址：https://mozilla.github.io/pdf.js/
新版本不支持部分浏览器，为了更好的兼容性，下载旧版本浏览器的文件包，点击 Download 按钮
下载并解压相关内容，使用 viewer.html 配合 iframe 插件查看pdf文件：
将pdfjs文件夹放到hexo中，使用相对路径使用

建议放在hexo source文件夹并skip-render掉，这样可以主题无关地使用pdf阅读功能

|-----------|----------------------------------------------------------------------------------------------------------------| | 1 | <iframe src='/vvd_js/pdfjs/web/viewer.html?file=<src-to-pdf>' style='width:100%;height:100%'></iframe> |