Hexo内嵌PDF.js全平台查看PDF

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

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

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

示例

阿力古の小菜园

文献-PDF.js Demo

参考教程

PDF.js

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

markdown中写入

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

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

我的代码

markdown中插入pdf：

<iframe src="https://pdf.aligu.top/pdfjs/web/viewer.html?file=/PDF/DNA.pdf" width="100%" height="500px" frameborder="0"></iframe>

我的文献页面PDF.js Demo1配置如下：

{% hideToggle PDF.js Demo1, var(--btn-bg), white %}

{% tabs -1 %}

<!-- tab DNA -->

<iframe src="https://pdf.aligu.top/pdfjs/web/viewer.html?file=/PDF/DNA.pdf" width="100%" height="2000px" frameborder="0"></iframe>

<!-- endtab -->

<!-- tab 有机电致发光材料 -->

<iframe src="https://pdf.aligu.top/pdfjs/web/viewer.html?file=/PDF/%E6%9C%89%E6%9C%BA%E7%94%B5%E8%87%B4%E5%8F%91%E5%85%89.pdf" width="100%" height="2000px" frameborder="0"></iframe>

<!-- endtab -->

<!-- tab model -->

<iframe src="https://pdf.aligu.top/pdfjs/web/viewer.html?file=/PDF/model.pdf" width="100%" height="2000px" frameborder="0"></iframe>

<!-- endtab -->

{% endtabs %}

{% endhideToggle %}

我的文献页面PDF.js Demo2配置如下：

{% hideToggle PDF.js Demo2, var(--btn-bg), white %}

- [Trace-based Just-in-Time Type Specialization for Dynamic Languages](https://pdf.aligu.top/pdfjs/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf)

- [The structure of DNA](https://pdf.aligu.top/pdfjs/web/viewer.html?file=/PDF/DNA.pdf)

- [model](https://pdf.aligu.top/pdfjs/web/viewer.html?file=/PDF/model.pdf)

- [TOrganic electroluminescent diodes](https://pdf.aligu.top/pdfjs/web/viewer.html?file=/PDF/%E6%9C%89%E6%9C%BA%E7%94%B5%E8%87%B4%E5%8F%91%E5%85%89.pdf)

- [A low-cost, high-efficiency solar cell based on dye-sensitized colloidal TiO2 films](https://pdf.aligu.top/pdfjs/web/viewer.html?file=/PDF/%E7%87%83%E6%96%99%E6%95%8F%E5%8C%96%E5%A4%AA%E9%98%B3%E7%94%B5%E6%B1%A0.pdf)

{% endhideToggle %}

后记

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