后台返回文件流如何转成pdf文件实现直接下载

看了很多文章,写的还是不够简单明了,所以自己总结了一篇文章:
当我们有个需求需要下载点击就能直接下载pdf的时候,往往会以为window.open就能实现,但是,事实并非如此,结果打开是pdf预览模式,这是因为浏览器自带有PDF阅读器,这并不是我们想要的,那如何来实现该需求呢,下面就跟着我一起来实现吧!
我的项目是在vue+ts写的,所以需要我们先安装:

npm install downloadjs

下载完成后我们还需要下载一个东西,因为是在ts项目里,如果不是在ts项目,就单纯Vue项目可以忽略此步骤。

npm install @types/downloadjs
//然后我们需要在shims-vue.d.ts里暴露downloadjs
declare module 'downloadjs'

然后就可以愉快的玩耍了,我们只需在需要的地方引入

import download from 'downloadjs'

然后在下载的方法里调用这个download就可以实现了

//这个res是后台返回的文件流
download((new Blob([res])), 'contract.pdf', 'application/pdf')

对了,特别要注意的是如果下载下来的pdf文件如果打开看不到图片内容类似情况的,需要在axios请求返回文件流接口里放入

...
method: 'get',
responseType: 'blob'
...

好了,这就是超简单的点击实现pdf下载的方式,当然还有一个库file-saver也可以按需实现,步骤也是跟上边儿一样的,就不一一道说了,希望能帮到迷惑的小伙伴们。

你可能感兴趣的:(后台返回文件流如何转成pdf文件实现直接下载)