Hexo -18- 添加 PDF 阅读功能
本文介绍在hexo 中添加 pdf 插件的方法。
方法一 hexo pdf
- 安装 hexo pdf 插件
- 在博客中插入pdf 指令
安装插件
$ npm install --save hexo-pdf官网：https://github.com/superalsrk/hexo-pdf
插入链接
{% pdf <url-to-pdf> %}- 该方法可以方便地在hexo PC端嵌入PDF
- 弊端是手机端无法正常显示页面
方法二 < iframe >
所有浏览器都支持 < iframe > 标签，直接将src设置为指定的PDF文件就可以预览了。
此外可以把需要的文本放置在 < iframe > 和 之间，这样就可以应对无法理解 iframe 的浏览器，比如下面的代码可以提供一个PDF的下载链接：
<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 >
< embed > 标签定义嵌入的内容。
<embed src="/index.pdf" type="application/pdf" width="100%" height="100%">- 可以在PC端显示
- 手机端无法显示
方法四 < object >
< object >定义一个嵌入的对象，请使用此元素向页面添加多媒体。此元素允许您规定插入 HTML 文档中的对象的数据和参数，以及可用来显示和操作数据的代码。用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。几乎所有主流浏览器都拥有部分对 < object > 标签的支持。这个标签在这里的用法和< iframe >很小，也支持回退：
<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 >能提供一个更强大的回退方案：
<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解决方案
使用方法
- 下载 pdf.js
- 官网地址：https://mozilla.github.io/pdf.js/
- 新版本不支持部分浏览器，为了更好的兼容性，下载旧版本浏览器的文件包，点击
Download按钮
- 下载并解压相关内容，使用 viewer.html 配合 iframe 插件查看pdf文件：
- 将pdfjs文件夹放到hexo中，使用相对路径使用
建议放在hexo source文件夹并skip-render掉，这样可以主题无关地使用pdf阅读功能
<iframe src='/vvd_js/pdfjs/web/viewer.html?file=<src-to-pdf>' style='width:100%;height:100%'></iframe>- 使用时会报错：
Error: file origin does not match viewer's- 需要注释掉
web/viewer.js文件中的相应内容：
- 示例：
- 这是目前发现唯一支持多平台浏览PDF的方案
参考资料
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021年8月14日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
