微信小程序中使用h5页面预览图片、视频、pdf文件

遇到了这么一个需求，需要在微信小程序中点击文件，进行文件预览。

要求：

1. 图片：长图需要宽度100%高度自适应；横图的话宽度100%，高度居中显示
2. 视频：视频不管横向还是竖向都居中显示，有全屏播放按钮
3. pdf：pdf需要宽度100%，高度自适应。可以预览多页pdf文件。

概要：

使用原生html、js、css写的，通过url吧要预览的文件的url传递过去。

图片使用进行预览，自己写样式

视频使用的是video.js进行的预览，我发现这个可以兼容安卓和苹果手机，而且预览速度很快。

pdf使用的是pdf.min.js进行的预览。--就这玩意不好整

代码：

    
    
    
    
    
    
     
     
     


    
    

        

            

                
            
            

                
            
            

            
            

            
            

            
            

              上一页
              1 / 1
              下一页
          
        
    
    
    

使用：

http://192.168.3.189:5500/preview.html?url=https://kt.sh-t.com.cn/sqb/c4cee917056c24b0030864d661d92c2f.pdf

像这样传递参数就行。