hexo博客显示pdf

1.仅电脑端显示pdf

这里仅在电脑端展示网上有各种各样的帖子,就不详细介绍了,只介绍容易踩坑的点。

1
<!-- <embed src="./MySQL-运维篇.pdf" width="100%" height="750" type="application/pdf"> -->
  1. 上方为直接在md文件中插入的html代码,重点注意src路径,默认把创建文章同名文件夹打开,把对应的pdf放在文章同名文件夹中,src路径如上所示。
  2. 要在hexo的配置文件中打开pdf开关为true,因为我用的是next主题,所以也要把next主题的配置文件中的pdf开关设置为true。其他没什么好强调的地方了。

2.电脑和手机端均可以显示pdf

路径显示问题很搞心态,搞了很长时间

参考文章https://www.bilibili.com/read/cv22329422/

路径问题参考文章(我使用的是网络路径访问)https://www.sakuratears.top/blog/PDF-js插件.html

我是在source文件夹下面新建了一个pdfjs用于存放下载的PDF.js项目(我把下载后的PDF.js项目文件夹也命名为pdfjs),以下是我插入到md文章中的html代码

1
<iframe src="/pdfjs/pdfjs/web/viewer.html?file=http://localhost:4000/2024/03/24/JavaGuide面试突击版/JavaGuide面试突击版.pdf" width="100%" height="750" frameborder="0"></iframe>

其中src是从source目录开始的,file目录我选择的是网络路径访问,相对路径访问感觉有点麻烦,关于我是如何确定的网络路径:,是通过在1.仅电脑端显示pdf中查看浏览器开发者工具确认的。

因为自己太菜了,就这么简单的一个路径问题搞了好长时间,记录下来当个资料,如果能帮助到别人就更好了。


唉,在项目实际部署时又遇到了问题,貌似是跨域的问题,上面给出的file路径是localhost本地路径,那部署到github上肯定不行,然后我就改成了自己的github项目目录

1
<iframe src="/pdfjs/pdfjs/web/viewer.html?file=https://jiqiren116.github.io/2024/03/24/JavaGuide面试突击版/JavaGuide面试突击版.pdf" width="100%" height="750" frameborder="0"></iframe>

但还是不行,因为有跨域问题,最后是注释掉了pdfjs中关于跨域的代码才行的。

参考链接pdf.js_pdfjs路径-CSDN博客


好吧,又遇到了问题,部署后用手机查看时加载特别慢,要加载好长的时间,根本无法忍受,在网上找了各种办法都不行,想换回第一种方法了,就是只在电脑端显示pdf,在手机端不显示,而是提供了一个下载pdf的按钮,现在在手机端加载太慢严重影响了我的体验。


2024年3月24日 23:32:28

参考链接如何一次只加载一个或几个页面? ·问题 #8897 ·Mozilla/pdf.js (github.com)

通过查询github终于解决了pdfjs按需加载的问题,修改pdfjs文件夹中的viewer.mjs文件,将以下两个配置由false改为true即可开启pdf按需加载。

1
2
3
//自动获取
"disableAutoFetch": true,
"disableStream": true,

那如何确定是否是按需加载呢,可以通过开发者工具查看状态码,状态码为206就是按需加载,浏览的时候也能清楚的发现,不是全部加在,而是看到某一部分时那一部分才开始加载。


改进pdf路径

2024年3月31日 15:36:45

参考文章:部署PDF.js到Hexo博客 - 小晓de雨滴 (fxy5750.github.io)

这次的改进是pdf的具体路径比以前简洁了很多,这次是放到了pdfjs里面,一开始自己也觉得这样会导致博客目录很混乱,但是想到不会放太多的pdf,也是可以接受的。

1
2
3
4
之前

<!-- 第三种方式-改进,有目录也可以手机端显示 -->
<iframe src="/pdfjs/pdfjs/web/viewer.html?file=https://jiqiren116.github.io/2024/03/31/登录校验、会话技术、JWT令牌与拦截器|过滤器实践/登录校验.pdf" width="100%" height="750" frameborder="0"></iframe>
1
2
3
4
5
改进后的路径

<!-- 第四种方式-改进了pdf文件路径-->
<iframe src="/pdfjs/pdfjs/web/viewer.html?file=/pdfjs/pdfjs/web/pdf/登录校验.pdf" width="100%" height="750" frameborder="0"></iframe>