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

作者：小蓝xlanll | 2024-05-19 23:10:49

踩

若依框架 pdfjs

若依导出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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

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

需求：

excel正常下载，不在多说。
PDF也是正常下载，但是下载之后要在新标签页中打开预览。

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

因此我在封装好的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)
    })
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

问题二：导出blob转json

之前一直考虑的成功情况，正常下载，返回二进制流，对二进制流blob解析
还有一种失败情况，后端返回json格式信息

在这里插入图片描述

注意看上面responseType：‘blob’

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

所以现在要解决的将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   
    }
1
2
3
4
5
6
7
8
9
10
11
12
13

贴上完整代码

// 通用下载方法
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])
    // }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】

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

若依导出PDF与Excel

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

问题二： 导出blob转json

问题二：导出blob转json