vue项目ant框架+pdf.js填坑总结，如何让后端返回的pdf数据流在浏览器预览

赘述一下背景，最近在做一个OA项目，项目中有打印功能，而且有不同的打印接口和请求方法，get请求方式url拼参数的就不多说了，没有什么难度；今天主要讲的是接口请求为post方式，且要在新页面打开需要预览的pdf内容！

网上关于pdf查看的解答很多，但是要么不详细，要么没有效果，都不能解决我的问题…好难啊！下定决心开始研究，从接口请求的header头，返回的数据类型一直到跨域，可以说是很心酸啊！不废话了上代码

以上是get请求时直接在url传参，用window.open()方法直接打开新页面即可通过浏览器直接预览

post请求的话也没有问题，能请求成功，返回数据流和get是一样的，但是window.open()打开是空的什么都没有…开始和后端沟通，尝试了formdata也不行，不知道是我写的不对还是怎么回事，便不在继续纠结form表单传参了。

网上大部分还是说的pdf.js，于是便下载下来，地址：点击下载；我用的是稳定版2.3.2的
下载后有两个文件夹build和web，我是把这两个放在了public下新建的static里，开始也放到view模板目录下，但是路径会有问题，各位同学实际使用中可自行尝试，方式并不是一成不变的，万一你的项目就可以呢是吧。

网上有种说法是web下的viewer.js（有的版本可能在html里）里有个默认的地址需要删掉，也有说不用的，我是直接删了，各版本的命名方式大同小异，各位也可以自行尝试删与不删的区别

配置好之后就是模板内的写法了，不能使用原有后端接口的路径作为访问路径了，所以要使用viewer.html进行渲染，具体写法很多文章都写了

这个是各种尝试的结果，最后都注释了，主要就在研究用blob方法将返回的数据流生成本地url，blob方法大家可以自行去查资料，这里不多说了，因为我需要打开新窗口进行预览打印，所以直接window.open，里面就是viewer.html所在路径，然后固定参数file=url，这里有个点需要注意下，就是encodeURIComponent转码问题，我这边进行了转码，我也尝试了不转码也是可以的，只是url不同，建议进行转码


以上是转码与否的区别，同学们也是各取所需吧，代码写道这里基本就完事了，可以打开url并且是预览pdf，但是内容为空！然后跟后端各种调试都没有成功，查资料有说加&.pdf的，然后根本不行，也不知道他们什么情况，也有说跨域的，我这里不存在，因为一直不报错，然后就开始研究是不是数据类型的问题呢，然后便开始了漫漫尝试之路

总之就是不行，然后就开始回到blob问题上，是不是接收数据类型造成的？事后证明我的猜测是正确的。这里给大家一个建议，如果有难题解决不了的，发散你的的思维，去怀疑各个环境并尝试！最后blob需要接收arraybuffer的返回类型，最终在接口配置文件中自己定义了下返回类型，于是完美了，那感觉比抽了两根烟都爽啊！

到这里pdf预览的问题便完美解决了，在一想后端直接定义responseType: ‘arraybuffer’ 是不是应该也可以呢？因为最近后端工作太多便没有去打扰尝试，各位同学可以自行沟通尝试下哈！希望此篇方法能帮到大家！