若依框架导出PDF与Excel新标签页打开

若依导出PDF与Excel

问题一：PDF导出新标签打开

在若依框架中，导出有个通用download的下载方法，这是已经封装好在request.js中的，不管是导出excel还是pdf都是走这个download方法。
而若依框架中默认导出excel，没有导出的pdf功能，所以pdf功能也是按照excel那样写在.vue文件中。

如图：

 /** 导出excel */
    handleExport() {
      this.download(
        "posuser/userDealMapper/export",
        // "posuser/userDealMapper/downloadTemplate",//导入模板
        {
          ...this.queryParams,
        },
        `client_${new Date().getTime()}.xlsx`,
        'xlsx'
      );
    },
    /** 导出PDF全部 */
    exportPdf() {
      this.download(
        "posuser/userDealMapper/pdf",
        {
          ...this.queryParams,
        },
        `client_${new Date().getTime()}.pdf`,
        'pdf'
      );
    },
    /** 导出模板 */
    exportTemplate() {
      this.download(
        "posuser/userDealMapper/printpdf",
        {
          ...this.queryParams,
        },
        `client_${new Date().getTime()}.pdf`,
        'pdf'
      );
    }
// 如果下面有新标签页，上面类型必须做适配
// 1.excel不需要新标签打开，所以上面也不需要适配
// 2.pdf需要新标签页打开，所以上面必须适配
// 3.如果上面类型不做适配，下面不写新标签，那么他们两个都可以有下载的样式，但是pdf没有新标签预览的功能

// type是excel时，不打开新标签页，下面不填写_blank
// type是pdf时，打开新标签页，下边就得写那个_blank

以上download中传的参数来自，request.js中通用的download下载方法。

需求：

1. excel正常下载，不在多说。

2. PDF也是正常下载，但是下载之后要在新标签页中打开预览。

   所以我需要判断，类型是PDF还是excel，是PDF在新标签页中打开

3. 因此我在封装好的download方法中新增了一个参数type以便区分是哪种类型

   export function download(url, params, filename, type) {
     return service.post(url, params, {
       transformRequest: [params => {return tansParams(params)}],
       headers: {'Content-Type': 'application/x-www-form-urlencoded'},
       responseType: 'blob',
     })
     .then((data) => {  
       const content = data
       const blob = new Blob([content],{type: "application/pdf"})
       if ('download' in document.createElement('a')) {
         const elink = document.createElement('a')
         elink.download = filename
         elink.style.display = 'none'
         elink.href = URL.createObjectURL(blob)
         document.body.appendChild(elink)
      	  // 判断类型   
         if(type === "pdf"){
         // 添加新标签打开
         elink.target = "_blank";
         window.open(URL.createObjectURL(new Blob([content], {type: "application/pdf"})), '_blank')
         }
         elink.click()
         URL.revokeObjectURL(elink.href)//释放
         document.body.removeChild(elink)//移除
       } else {
         navigator.msSaveBlob(blob, filename)//仅仅提供保存按钮
       }
     })
       .catch((r) => {
         console.error(r)
       })
     }
   

问题二： 导出blob转json

1. 之前一直考虑的成功情况，正常下载，返回二进制流，对二进制流blob解析
   

2. 还有一种失败情况，后端返回json格式信息

注意看上面responseType：‘blob’

试了很久发现只要将这个注掉，后端返回的msg就能展示出来，原来是因为，这个responseType只能设置一种类型，后端返回的信息是JSON格式的，而上面设置的是blob不能直接读取code和msg，当然展示不出来提示信息了

3. 所以现在要解决的将blob转成json （读取code和msg）

   if (content.type == 'application/json') {
      const reader = new FileReader()
      reader.onload = function () {
        const { msg } = JSON.parse(reader.result) //此处的msg就是后端返回的msg内容
        // alert(msg)
        Message({
          message: msg,
          type: 'error'
        })
      }
      reader.readAsText(content)   
      return   
    }

贴上完整代码

// 通用下载方法
export function download(url, params, filename, type) {
  return service.post(url, params, {
    transformRequest: [params => {return tansParams(params)}],
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    responseType: 'blob',
  })
  .then((data) => {  
    const content = data
    console.log(data)
    // 判断返回数据JSON格式
    if (content.type == 'application/json') {
      const reader = new FileReader()
      reader.onload = function () {
        const { msg } = JSON.parse(reader.result) //此处的msg就是后端返回的msg内容
        // alert(msg)
        Message({
          message: msg,
          type: 'error'
        })
      }
      reader.readAsText(content)   
      return   
    }
    // blob情况
    const blob = new Blob([content],{type: "application/pdf"})
    if ('download' in document.createElement('a')) {
      const elink = document.createElement('a')
      elink.download = filename
      elink.style.display = 'none'
      elink.href = URL.createObjectURL(blob)
      document.body.appendChild(elink)//添加
      if(type === "pdf"){
      // 添加新标签打开
      elink.target = "_blank";
      window.open(URL.createObjectURL(new Blob([content], {type: "application/pdf"})), '_blank')
      }
      elink.click()
      URL.revokeObjectURL(elink.href)//释放
      document.body.removeChild(elink)//移除
    } else {
      navigator.msSaveBlob(blob, filename)//仅仅提供保存按钮
    }
  })
    .catch((r) => {
      console.error(r)
    })
  }

export default service


 // const blob = new Blob([content])
    // let blob
    // if (type === 'pdf') {
    //   blob = new Blob([content], {type: "application/pdf"})
    // } else {
    //   blob = new Blob([content])
    // }