vue elementui下载文件和使用vue-pdf展示pdf文件

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;
}