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

  • Post author:
  • Post category:vue


赘述一下背景,最近在做一个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’ 是不是应该也可以呢?因为最近后端工作太多便没有去打扰尝试,各位同学可以自行沟通尝试下哈!希望此篇方法能帮到大家!



版权声明:本文为weixin_43136027原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。