1、下载blob文件
//在请求中必须标明:responseType: 'blob'。
比如this.$axois({
method: 'get',
url: '',
responseType: 'blob'
}).then(response => {
let data = response.data;
//如果下载下来的是i二进制流,也可以通过new Blob[data]去转换成bolb对象再进行操作
//下载错误时
if(response.status !== 200) {
let reader = new FileReader();
reader.onload = function (event) {
let content = reader.result;
reader.readAsText(blob, "utf-8");
return;
}
let url = windows.createObjectUrl(data);
//在dom中创建一个a标签,并默认点击
le tlink = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', ‘filename.pdf');
document.body.appendChild(link);
link.click();
}).catch(function(error) {});
如果前端想获取文件名,首先后端得设置
response.setHeaders(“Access-Control-Expose-Headers”, “Content-Disposition”); //如果不设置这,前端可以看到文件名获取不到文件名
response.setHeaders(“Content-Disposition”, “文件名”);
前端获取:response.headers[“Content-Disposition”].split(";")[1].split("=")[1]
2、下载并展示pdf
安装插件vue-pdf
npm install --save vue-pdf
然后引用,可全局在mian.js中也可局部在页面中引用
import pdf from 'vue-pdf'
注册组件
全局:Vue.component('pdf', pdf)
局部:在export default {
...
components: {pdf},
data() {
return {
pdf: '',
numPages: []
}
}
}
elementui中渲染的pdf
<pdf v-for="item in numPages" :key="item" :src="pdfUrl" :page="item"></pdf>
将文件下载下来
this.$axios({
method: 'get',
url: '',
responseType: 'blob'
}).then(response => {
let data = reponse.data;
this.pdfUrl = this.getPdfUrl(data);
}).catch(function(error) {});
getPdfUrl(file) {
url = window.createObjectURL(file);//将文件转化成url
//加载pdf
let loadingTask = pdf.createLoadingTask(url);
loadingTask.promise.then(pdf => {
this.numPages = pdf.numPages;
}).catch(err => {
console.error('pdf 加载失败', err);
})
return url;
}