【文献】Hexo内嵌PDF.js全平台查看PDF

  1. 参考教程
  2. 示例
  3. 安装新Hexo
  4. 准备PDF.js文件
    1. 下载
    2. 解压到文件夹
    3. 存放pdf文件
    4. 跳过渲染pdf.js
  5. 部署Hexo
  6. 博客使用pdf.js
  7. 后记

2024-08-08更新,单独部署一个含有PDF.js功能的hexo博客到vercel上,提取pdf链接进行使用。

2024-07-11更新,pdfjs内容太大,网站部署到vercel后加载太慢,目前弃用。

2024-07-10,该方法可以实现多平台浏览PDF,但pdf.js文件解压后有17.7MB, 对文件大小介意的慎重使用。

参考教程

A general-purpose web standards-based platform for parsing and rendering PDFs

Hexo-18-添加 PDF 阅读功能

示例

安装新Hexo

直接按照Hexo官网安装博客

准备PDF.js文件

下载

到项目主页下载整个项目:https://mozilla.github.io/pdf.js/ (我下载的版本是:older browsers的Stable(v4.4.168))

解压到文件夹

将上述文件解压后文件夹放在上述新Hexo博客[BlogRoot]\source\目录下,我改名为pdfjs。

存放pdf文件

把需要展示的pdf文件直接放在[BlogRoot]\source\PDF目录下。

跳过渲染pdf.js

_config.yml文件中的skip_render下要包括:

skip_render:
    - 'pdfjs/**/*'

部署Hexo

把具有pdfjs文件夹的Hexo博客部署到vercel服务器上,设置functions节点选HongKong,如果有域名就重新命名,我的是pdf.aligu.top。部署上服务器后pdf文件就有了链接,可以直接在浏览器打开pdf。
比如:https://pdf.aligu.top/pdfjs/web/viewer.html?file=/PDF/DNA.pdf

博客使用pdf.js

在post或者page文件的适当位置写入,pdf阅读宽度高度可以根据自己需要调节。

<iframe src="域名/pdfjs/web/viewer.html?file=/(PDF位于的文件夹)/(PDF文件名).pdf" width="100%" height="500px" frameborder="0"></iframe>

后记

对比原来的hexo-pdf插件,PDF.js需要额外部署一个Hexo博客到服务器生成静态文件和链接,比较麻烦。但可以避免在移动端需要下载pdf的尴尬和第一次加载博客时内容(17.7MB)过大的问题,同时PDF.js也具有较多功能,全平台可用,和客户端的pdf阅读器差不多,生成的链接可以随意引用,总体上还是优于插件hexo-pdf方法的。


转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 3415226167@qq.com
资源 相册