vue前端接收文件流格式，页面pdf/img回显与file下载

接收后端返回的文件流，前端页面根据类型展示。

首先接口调用时，将响应类型设置为blob

export const downLoadFile = data =>

  axiosPromise('post', 'file/downLoadFile', data, {

    responseType: 'blob'

  });


// 调用接口
downLoadFile({ recAppendixUrl: ele }).then(res => {
    if(regitem.type === '.pdf$') {
      url = URL.createObjectURL( new Blob([res], {
               type: 'application/pdf'
            }))
    } else { //文件及图片类型生成blob下载路径
       url = URL.createObjectURL(res)
    }
   }).catch(err => { });

其次接口返回文件流后，前端拿到页面进行展示

图片类型展示

 <img  v-if="!fileitem.fileflag"  :src="url"  alt="" />

pdf类型展示

// 打开新页面展示
 if (item.fileflag === 'pdf') {
          let pathurl = this.$router.resolve({
            name: 'pdfview',
            query: {
              filePath: url 
            }
          });
          window.open(pathurl.href, '_blank');
          return;
        }

文件类型下载

const aLink = document.createElement('a');
  aLink.href = url;
  aLink.setAttribute('download', item.fileName);
  document.body.appendChild(aLink);
  aLink.click();
  document.body.removeChild(aLink);