vue前后端分离及uniapp预览pdf文件流

场景描述：

框架采用ruoyi-vue前后端分离版，移动端采用uniapp的H5

前端展示服务器上的pdf，不采用远程地址访问的方式，如：

http://xxx.xxx.xx.xxx:/web/test1234.pdf这种方式不安全，可以随意访问web资源路径

本文采用的方式：Vue端及uniapp端通过接口获取pdf文件流返回到前端并显示。

1. 后端服务代码

2. Vue端

采用iframe展示，代码如下：

1. Index.vue代码：

download(pdfName) {

downloadPdf(pdfName).then(res=>{

let blob = new Blob([res], { type: 'application/pdf' })

this.pdfUrl = URL.createObjectURL(blob) + '#toolbar=0'

});

}

2. pdfdownload.js代码

export function downloadPdf(pdfUrl) {

return request({

url: '/app/file/download/'+pdfUrl,

method: 'get',

responseType: 'arraybuffer',//一定要设置响应类型，否则页面会是空白pdf

headers: {

'Content-Type': 'application/json'

}

})

}

3. Uniapp端

https://ext.dcloud.net.cn/plugin?id=2187 安装插件，

把hybrid整个文件夹放到自己项目的根目录下,与static、App.vue同级的目录

1. Index.vue代码

Config.pdfUrl: '/hybrid/html/web/viewer.html?pdfUrl='

2. Hybrid/html/web/viewer.html添加js

在末尾的body中添加如下代码：

图1

图2

图3

图4

可以把图2中的getAccessToken方法去掉，图3的beforeSend去掉。

3. Viewer.js修改