手机端文件预览解决方案

省流：

前端：npm i pdfh5

跨域问题：

选择1：服务器的正式和测试上配置nginx转发pdf文件
（如果网段不通也一样会跨域，需要开通网段权限）
选择2：联系pdf提供者为我们的端口开通allowmethod的权限

详解：
总所周知，我们日常Web桌面开发一般会用iframe嵌套，或者window.open形式打开pdf。
但是在 pdf文件在android 上是下载 ，而不是预览。
即使是嵌套的iframe，也会直接下载。所以要单独为 pdf 的预览做处理

这里测试了npm的pdfjs，vue-pdf，Pdfjs-dist等插件，都会产生安卓端乱码，有些根据文档通过修改nodulemoudle包的源文件也不行，最后使用了pdfh5的插件，不再乱码。

Pdfjs：

通过官网，下载pdfJs插件包，放至项目中https://mozilla.github.io/pdf.js/

本插件不是nodemodule插件，属于独立的html项目，使用方式为打开html文件后跟上一个file=${pdf}的参数，该html文件拿到参数就会开始解析展示pdf。

将下载的插件包直接放到tomcat或者nignx的html文件夹里，可以提供服务

window.open("./js/pdfJS/web/viewer.html?file=算法图解.pdf" );

其中的bug《如预览远程服务器上的文件跨域：则将vierwe.js中跨域认证注释即可》并没有效果，只是不报错了，直接白屏。推荐使用nginx转发。

优点：什么都不用写，直接部署到服务器中就能使用。

缺点：在安卓，ios，安卓钉钉，ios钉钉会出现不同种类的bug，有的白屏有的报错。无法解决。

Pdfjs-dist
Npm install Pdfjs-dist
火狐浏览器开源的用来解析pdf的底层包，其余的类似于pdf5，pdfjs，vue-pdf包都是基于这个。
需要引入两个包，前端请求来pdf，转成base64，再用pdfjs解析
代码示例

import * as PDFJS from 'pdfjs-dist/legacy/build/pdf.js'
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'

let b64 = await this.blobToBase64(res.data);
        var loadingTask = PDFJS.getDocument({ data: b64 });
        loadingTask.promise.then(function (pdf) {
          console.log(pdf);
        });

优点：十分底层，全都要自己写。
缺点：太底层了，开发一个功能要很久。
有的bug需要到nodemodule中去改。
而且即使在nodemodules改完了bug，解决了安卓普通浏览器，安卓微信的bug，安卓的钉钉还是会乱码。

vue-pdf

Vue项目常见的插件，自带很多功能，样式组件可自定义，包含加载进度、翻页、旋转，打印，页内元素可交互等，十分好用。
优点：自带功能，响应式，配置一下就能用。
缺点：安卓端全部乱码。

Pdfh5
在github上能够看到，说明文档是中文，推测是国人写的，给各种webview做了兼容。拿过来直接使用即可。
优点：不会乱码。

解决了乱码之后就是文件转发了
根据浏览器的同源策略，域名，ip地址，端口有一不同就会产生跨域问题，拿不到数据。
只有浏览器会跨域，安卓苹果的app，桌面exe等都不会跨域。
解决方法
在服务器的81端口上起一个nginx用来转发
1由前端去请求nginx
2nginx拿着参数请求帆软
3拿回数据发给前端
Nginx示例

    server {
        listen 8888;
        server_name qqq;
        # 参考文档 https://blog.csdn.net/m0_67403272/article/details/126113708
        location  /{ 
            root   D:\0prod;
            index  index.html index.htm;           
        }
        location /e{ 
            alias    E:\0prod;
            index  index.html index.htm;           
        }
         location /d{ 
            alias    D:\0prod;
            index  index.html index.htm;
        }
         location /pdf/{ 
            proxy_pass http://pdf;
            add_header Access-Control-Allow-Origin *; #允许任何来源的跨域请求
            add_header Access-Control-Allow-Credentials 'true';     #服务器允许将 cookie(或其他用户凭据)包含在跨域请求中.
            add_header Content-Type "application/pdf"; #文档类型
            add_header Content-Disposition "inline";  #规定浏览器用内联方法打开还是直接下载
        } 
        location /staticSpace{ 
            alias    E:\workspace\static;
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Credentials 'true';    
            add_header Content-Type "application/pdf";
            add_header Content-Disposition "inline"; 
        } 
    }
    upstream pdf{
        server 127.0.0.1:8001;
    }