后端返回文件流,前端打印,及根据文件流或者数据格式之前的判断

需求:打印表格的内容为PDF的格式。

后端：返回文件流，及返回的是普通的数据格式，则做相对应的处理。

首先先对文件流的数据进行处理吧。

例：

     请求获取到的res直接就是文件流

const res = await http（params）

await downLoadPdf(res,'打印模板')

 传到封装好的函数进行处理。

export const downLoadPdf = (res, name) => {
  const blob = new Blob([res], {
    type: 'application/pdf'
  })
  const fileName = name + '.pdf' // 文件名+后缀
  if (!!window.ActiveXObject || 'ActiveXObject' in window) {
    // IE
    window.navigator.msSaveOrOpenBlob(res, `${name}.pdf`)
  } else {
    // 允许用户在客户端上保存文件
    if (window.navigator.msSaveOrOpenBlob) {
      navigator.msSaveBlob(blob, fileName)
    } else {
      var link = document.createElement('a')// 定义一个a标签
      link.href = window.URL.createObjectURL(blob)// 需要生成一个 URL 来实现下载，链接到blob上
      link.download = fileName// 下载后的文件名称
      // console.log('fileName', link)
      link.click() // 模拟在按钮上实现一次鼠标点击
      window.URL.revokeObjectURL(link.href) // 释放 URL 对象
    }
  }
}

但是，需要注意的一点，在我们的axios请求里面，在header，config里面需要设置responseType: 'arraybuffer'的参数。后续才可以使用new Blob的方法进行解流。

 export const getForDownload = (url) => service.request({
  url: url,
  method: 'GET',
  responseType: 'arraybuffer'
})

如果下载的方式不止需要PDF的话，可以在new Blob的方法的第二个参数修改相对应的格式，详细可以去看new Blob的方法。

这时候已经可以下载为PDF，在浏览器打开既可以打印了。

但是这时后端会说，当前返回的文件流，不具备报错的问题，就是说，在你选中表格打印的时候，有的状态是不允许打印的，后端报错，前端需要给提示，所以这时候需要用到另外一种方法进行解决。

首先使用TextDecoder的方法声明构造函数，转成utf-8的格式，在使用 new Uint8Array（）转成无符号的数组。使用JSON.parse转成对象，如果此时后端返回正常的数据结构，errorData里面就会有值，就可以进行逻辑判断，如果是文件流，则为null，继续使用下载打印的方法。使用try catch的方法，避免代码报错，造成程序的阻塞。

        const enc = new TextDecoder('utf-8')
        let errorData = { code: null }
        try {
          errorData = JSON.parse(enc.decode(new Uint8Array(res))) // 转化成json对象
        } catch (error) {
          console.log(error)
        }
        if (errorData.code) this.$message.error(errorData.msg)
        else await downLoadPdf(res, '打印模板')

 API文档：

TextDecoder - Web API 接口参考 | MDN (mozilla.org)

Uint8Array - JavaScript | MDN (mozilla.org)

 路漫漫其修远兮呀。