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
示例
示例1:
示例2:
示例3(文献列表):
Trace-based Just-in-Time Type Specialization for Dynamic Languages
A low-cost, high-efficiency solar cell based on dye-sensitized colloidal TiO2 films
安装新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