前言:
最近做了一个在前端展示发票的功能,后端接口返回ofd格式的文件,前端获取到ofd格式的下载文件url,然后通过url调用后端接口,获取到pfd流文件,之后前端需要把流文件转为blob链接在页面展示,步骤如下:
1、前端下载vue-pdf插件
命令行输入: npm install --save vue-pdf
导入组件: import pdf from ‘vue-pdf’
注册组件: components: {pdf}
data中定义: src: ‘’
2、前端请求接口获取pdf流文件
页面里展示,不要忘记写这行代码:<pdf :src="src" ></pdf>
//以下是前端请求接口获取pdf流文件代码
axios({
method: 'get',
url: '请求的接口URL',
data: "入参对象", //例:{uploadUrl:uploadUrl},传入ofd格式的下载文件url
responseType: 'blob' //设置响应的数据类型为一个包含二进制数据的 Blob 对象,必须设置,否则pdf会展示空白!!!
}).then(res => {
const binaryData = []
binaryData.push(res) //res就是pdf流文件
//获取blob链接
this.src = window.URL.createObjectURL(new Blob(binaryData, { type: 'application/pdf' }))
}).catch(function (error) {
console.log(error);
});