前端-》 文件流 预览 + 下载pdf

1.预览pdf

后端返回数据： 

    previewPdf () {
     service(
        'https://XXX.com/dev-api/AssetReport/getAssetRepostPDF/true',
        {
          responseType: 'blob',  //响应blob文件流
          method: 'post',
          headers: {
            Authorization: this.gettoken,
            userType: 'app',
            'Content-Type': 'application/json;charset=UTF-8'
          }
        }
      ).then((res) => {
        console.log('预览来了', res)

        if (window.navigator.msSaveBlob) { 
          // IE无法打开Blob URL链接，所以不能预览只能通过window.navigator.msSaveBlob下载
          // 注：msSaveBlob的第二个参数要有.pdf后缀，不然IE下载后是没有后缀的文件

          const blob = new window.Blob([res], { type: 'application/pdf;charset-UTF-8' })
          var fileName = 'XXXpdf名称'
          window.navigator.msSaveBlob(blob, `${fileName}.pdf`)
        } else {
     
         //创建blob对象,传参-》接口获取到的数据内容 ,保存为pdf类型文件
          const blob = new window.Blob([res], {
            type: 'application/pdf;charset-UTF-8'
          })
          const href = URL.createObjectURL(blob)
          window.open(href)

        }

      })
    },

 2.下载pdf

 后端返回数据：

  

   // 下载pdf
    getpdf () {
      service(
        'https://XXX.com/dev-api/AssetReport/getAssetRepostPDF/false',
        {
          responseType: 'blob',
          method: 'post',
          headers: {
            Authorization: this.gettoken,
            userType: 'app',
            'Content-Type': 'application/json;charset=UTF-8'
          }
        }
      ).then((res) => {
        console.log('下载', res)
       const blob = new Blob([res], {
            // 如何后端没返回下载文件类型，则需要手动设置：type: 'application/pdf;chartset=UTF-8' 表示下载文档为pdf，如果是word则设置为msword，excel为excel
            type: 'application/pdf;chartset=UTF-8'
          })
          const a = document.createElement('a')
          // 兼容webkix浏览器，处理webkit浏览器中href自动添加blob前缀，默认在浏览器打开而不是下载
          const URL = window.URL || window.webkitURL
          // 根据解析后的blob对象创建URL 对象
          const herf = URL.createObjectURL(blob)
          // 下载链接
          a.href = herf
          // 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf'
          a.download =  '文件名称.pdf'
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
          // 在内存中移除URL 对象
          window.URL.revokeObjectURL(herf)
      })
    },

 2.2planB 其他下载方法

           var fileName = '文件名称';
          const elink = document.createElement("a");
            // console.log(new Blob([v.data]));
            elink.href = window.URL.createObjectURL(
             new Blob([res], 
              {type: `application/pdf`})
            );
            elink.style.display = 'none';
            elink.setAttribute('download', fileName);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);

可参考：

https://segmentfault.com/a/1190000023936932

vue-pdf预览和下载，后台返回文件流(blob) - 简书

vue文件流转换成pdf预览(pdf.js+iframe)&&使用vue-pdf实现pdf预览 - 塞巴斯酱 - 博客园 

使用 Blob 和 msSaveBlob 以本地方式保存文件_p312011150的博客-CSDN博客_navigator.mssaveblob