后端返回二进制流文件 excle导出或者xls xlsx docx pdf导出

小大周

已于 2023-12-07 10:57:30 修改

阅读量247

点赞数

文章标签：前端 javascript 开发语言

于 2023-10-16 10:55:27 首次发布

本文链接：https://blog.csdn.net/weixin_54397440/article/details/133853971

版权

方法一

//数据查询记录 excle导出
export function exportInterfaceSearch(data) {
  return request({
    url: '/risen/data/exportInh',
    method: 'post',
    responseType: 'blob',   // 第一步
    data
  })




第二步  res 是后端返回的二进制流文件

        const url = window.URL.createObjectURL(res)
        const a = document.createElement('a')
        a.style.display = 'none'
        a.href = url
        a.download = '数据目录'
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
        window.URL.revokeObjectURL(url)

或者这种写法

//接口列表导出
export function exportInterfaceManagement(params) {
  return request({
    method: 'get',
    isFormData: true,
    url: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx'
    responseType: 'blob',
    params
  })
}

    async impotout() {//导出
    
      exportInterfaceManagement({
   
      }).then((res) => {
        const blob = new Blob([res], {
          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        })
        const a = document.createElement('a')
        const href = window.URL.createObjectURL(blob)
        a.href = href
        a.download = '接口列表信息'
        document.body.appendChild(a)
        a.click()
        // console.log(a)
        document.body.removeChild(a)
        window.URL.revokeObjectURL(href)
        // console.log(res)
      })

方法二：//多种类型可以定义一个方法导出

api

//接口管理文档下载
export function exportwordlist(params) {
  return request({
    method: 'get',
    isFormData: true,
    url: '/sen/gatay/interce/downInteceDoc',
    responseType: 'blob',
    params
  })
}

定义文档名称和类型

  exportwordlist({interfaceUuid: record.uuid}).then(res => {
            this.$_downloadFile(res, '接口文档', 'doc') //res：返回数据
  })

this.$_downloadFile(res, '接口文档', 'doc') //res：返回数据

  $_downloadFile(obj, name, suffix) {
      const DOWNLOAD_TYPE_MAP = {
        xls: 'application/vnd.ms-excel',
        xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        doc: 'application/msword',
        docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
        pdf: 'application/pdf'
      }
      if (!DOWNLOAD_TYPE_MAP[suffix]) {
        throw new Error('请传入文件下载的格式后缀，eg：xls，xlsx，doc，docx，pdf')
      }
      const blob = new Blob([obj], {
        type: DOWNLOAD_TYPE_MAP[suffix]
      })
      const fileName = `${name}.${suffix}`
      let link = document.createElement('a')
      document.body.appendChild(link)
      link.href = URL.createObjectURL(blob)
      link.setAttribute('download', fileName)
      link.click()
      document.body.removeChild(link)
      URL.revokeObjectURL(link.href) // 销毁url对象
      this.$message.success('下载成功')
    },