利用PDF.js实现pdf预览遇到的坑(使用码云托管pdf笔记)_使用pdfjs插件预览文件显示空白-CSDN博客

本文链接：https://blog.csdn.net/zxy13826134783/article/details/105824282

本人在工作和学习中，会写一些笔记文档(word格式的)，为了阅读的方便，我之前的做法是把word转出html格式的文档，然后上传到github进行托管，然后利用github静态网站进行对外开放访问，这样在电脑端和手机端都能看到笔记，但缺点是笔记中的图片变得很模糊(因为github对图片压缩过)和访问速度过慢，所以放弃了github而转向码云，把word形式的笔记转成pdf(wps免费转)后上传到码云托管，利用码云的静态网站对外开放，实现手机端和电脑端阅读。

前期知识：1 会一点html和javascript

2 会git命令(github)

要实现pdf文档能在电脑端和手机端上阅读，需要使用到PDF.js，下载地址如下：

http://zxy15914507674.gitee.io/shared_resource_name/PDF.js相关资源文件.rar

上面的链接被码云废掉了，直接去我的仓库下载：https://gitee.com/zxy15914507674/shared_resource_name，找打对应的

PDF.js相关资源文件.rar 下载即可

资源结构如下：

使用PDF.js实现pdf文件预览非常简单，只需要在html中嵌入一个iframe标签即可：

<html>
<iframe src="你的服务器对外的地址或者码云静态网站对外的地址/web/viewer.html?file=PDF地址" width="100%" height="99%"></iframe>
</html>

但是需要注意的是，把下载的资源中build文件夹和web文件夹全部原封不动地上传到网站的根目录或者码云上并启动对外开放，至于如何在码云上启动静态网站，可以参考：

https://blog.csdn.net/zhangyu4863/article/details/80473412?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-5&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-5

下面分析我遇到的坑：

1 所有的资源文件（build文件夹和web文件夹下的文件）都必须部署在网站上

2 上面的iframe标签中的src属性：

src属性中地址必须是使用网站的全路径，src属性中的第一部分我之前使用相对路径和没有部署到网站上，直接就报错不显示，src属性中的第二部分我之前也是使用相对路径，然后就出现电脑端可以显示，到手机端上提示无法加载pdf文档