省流：
前端：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;
}
