解决一个移动端pdf预览问题

最近测试提了一个问题，移动端部分页面的pdf，在预览时只能放大一点，和另外的页面放大程度差距很大，希望可以增加这些页面的pdf放大程度，下面记录了解决问题的过程

1. 首先看了代码，发现不能放大的是添加水印的pdf，没有添加水印的可以正常放大；添加水印是在前端做的，使用react-pdf加载文件，加载完成后，使用canvas绘制，最后使用react-img-preview加载所有绘制好的pdf；
2. 刚开始以为是pdf绘制的时候有问题，查看了react-pdf的用法，里面没有预览缩放相关的，换成其他不用添加水印绘制的pdf文件，预览发现还是不能放大，所以排除了这个思路；
3. 那就是预览的问题了，查看其他能放大缩小的页面，发现这些页面用的另外一个预览组件react-image-lightbox，它支持预览时放大缩小，本想直接替换成这个组件，又觉得改动太大，不确定会不会有其他的影响；
4. 还是继续研究一下react-img-preview具体的使用方法，在github上看到，这个库只有2个star，觉得当时选择这个库的人有点太随意了；查看说明，一个React集成PhotoSwipe的移动端与PC端图片预览插件，查看package.json，用的是"photoswipe": "^4.1.2", 但是里面少了很多属性，其中就包括要用的缩放大小；
5. 还是看看photoswipe库中缩放相关属性，在官网找到了v4版本的文档，查到了设置缩放用的maxSpreadZoom这个属性，默认值为2；因为react-img-preview没有提供设置这个属性的方法，应该使用了默认值，在dist文件中搜索，发现设置的是1.33，导致预览时无法放大很多；
6. 找到问题后，解决问题就好了，首先是想要直接修改react-img-preview中的这个配置，但是这样的话别人更新代码不会同步，除非自己新建一个库，这样就比较麻烦了；所以使用了另外一种方法，直接把react-img-preview中的主要代码复制出来，写成一个组件，在组件中修改配置就可以了；

参考链接：

1. https://github.com/liulongbin1314/react-img-preview
2. https://github.com/dimsemenov/PhotoSwipe
3. https://photoswipe.com/v4-docs/options.html
4. https://blog.csdn.net/weixin_44001222/article/details/127941374