网页内PDF阅读插件手搓过程记录

最近手搓了一个网页内的PDF阅读插件，关于手搓的过程和结果特进行一下记录。

1、为什么要手搓一个PDF阅读插件？

自己之前建了一个EHS Wiki知识库（https://wiki.hser.ren/），主打就是可以免费在线浏览和下载EHS方面的法规标准、事故报告、资料文档等。所以这里面就有了2个需求：

1）可以在线浏览，就是PDF阅读插件；

2）因为自己购买的服务器比较小，为避免大流量影响，所以需要避免被爬虫批量下载。

对于第一个要求很简单，一般浏览器自带pdf阅读插件，只要直接调用就可以了；

第二个要求其实也很简单，增加了下载前的验证码输入确认环节。

但是后面发现，浏览器自带的pdf阅读插件是自带下载按钮的，所以即使下方的下载按钮增加了验证码功能，但是如果通过阅读插件下载的话，依然存在被爬虫批量下载的风险。

当然自带的PDF阅读插件还可以隐藏顶部的菜单栏，这样浏览者看不到下载按钮了，但是侧边栏也会取消，就会比较影响浏览者的使用体验。

所以如何在满足阅读体验的同时不被爬虫下载就是自己需要解决的问题了。

2、经历了哪些过程？

因为上面的原因，原生插件无法满足要求，就告诉AI我要定制一个PDF插件，要求如上，所以就开始了多次的微调：

1）第一个版本能够满足基本要求，但是没有侧边栏；

2）告诉AI要增加侧边栏功能，但是又出现了侧边栏显示位置只能左上，不能居中；

3）告诉AI调整为侧边栏缩略图居中，又发现PDF预览的文字很模糊；

4）告诉AI调整文字显示清晰度，自动调整了显示锐化程度或文字蒙版之类的；

5）但是后面又发现定制的这个插件对于横向和纵向不同的PDF显示效果不同，然后又设置了默认显示宽度100%；

6）后面继续增加了全页面显示和缩放等功能，同时设置为懒加载（即只加载前面的三四页），对于大文件而言相对友好，

至此，经过多轮的调整，目前终于可以属于一个能够兼顾需求和体验的插件了。

3、如何共享使用？

目前该插件上传至在线网盘，感兴趣的可以点击下载，然后一样让AI直接使用即可。

下载地址：https://hser.lanzouu.com/id2nH3x3otng密码:165g