快捷導(dǎo)航

vue后端傳文件流轉(zhuǎn)化成blob對象,前端點(diǎn)擊下載返回undefined問題

更新時間：2022年12月07日 10:31:23 作者：牛先森家的牛奶

這篇文章主要介紹了vue后端傳文件流轉(zhuǎn)化成blob對象,前端點(diǎn)擊下載返回undefined問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

效果如下

處理后的返回

<template>
  <div class="content-box">
    <div class="container">
      <div>。。。</div>
    </div>
  </div>
</template>

<script>
import {  exportProjectStandard } from '@/api/brand/standard'

export default {
  props: {},
  data() {
    return {}
  },
  methods: {
    gotoExport(row){
      // console.log(row);
      try {
        // window.location.href = `${ process.env.VUE_APP_BASE_BRAND_API }/v1/inspectionstandard/exportProject?id=${row.id}&standardName=${row.title}`
        // window.open(`${ process.env.VUE_APP_BASE_BRAND_API }/v1/inspectionstandard/exportProject?id=${row.id}&standardName=${row.title}`)
        // this.$message.success('數(shù)據(jù)導(dǎo)出中，請稍等')
        
        // 調(diào)接口文件流形式
        let parmas = {
          id: row.id,
          standardName: row.title
        }
        exportProjectStandard(parmas).then(res => {
          console.log(res);
          // 因為后端直接返回的就是blob數(shù)據(jù)流格式
          // if (res.code == 200) {
            const content = res;
            const blob = new Blob([content])
            const fileName = row.title + '.xls';  //自定義下載文件的名字
            if ('download' in document.createElement('a')) { // 非IE下載
              const elink = document.createElement('a');
              elink.download = fileName;
              elink.style.display = 'none';
              elink.href = URL.createObjectURL(blob);
              document.body.appendChild(elink);
              elink.click();
              URL.revokeObjectURL(elink.href); // 釋放URL 對象
              document.body.removeChild(elink);
            } else { // IE10+下載
              navigator.msSaveBlob(blob, fileName);
            }
          // }
        }).catch((error) => {
          this.$message.error('導(dǎo)出異常，請稍后重試')
        	console.log(error.response)   //可獲取錯誤的返回信息
          if (error.response.status == 400) {}
        }).finally(() => {})
      } catch (error) {
        this.$message.error('導(dǎo)出失敗')
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

如圖blob文件流格式

在這里插入圖片描述

封裝的方法如下

import axios from 'axios'
// import { Message } from 'element-ui'
import store from '@/store'
import { goLoginPage } from '@/utils'
import { getAccessToken, getRefreshToken, getAccessTokenTTL } from '@/utils/auth'

const SYSTEM_APPID = process.env.VUE_APP_SYSTEM_APPID
let isRefreshing = false // 是否正在刷新token
let requests = [] // 請求隊列

const exculdeUrls = ['/xxx/authorize/generateToken', '/xxx/authorize/refreshToken']

function checkExculdeUrls(url) {
  let flag = false
  exculdeUrls.map(item => {
    if (url.indexOf(item) >= 0) flag = true
  })
  return flag
}

function noTokenData() {
  return !getAccessToken() || !getRefreshToken() || !getAccessTokenTTL()
}

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_BRAND_API,
  // withCredentials: true,
  timeout: 300000
})

service.interceptors.request.use(
  config => {

    // 不需要驗證token的接口
    if (checkExculdeUrls(config.url)) {
      return config
    }

    // token數(shù)據(jù)丟失
    if (noTokenData()) {
      console.log('token數(shù)據(jù)丟失');
      goLoginPage()
    }

    if (new Date().getTime() >= getAccessTokenTTL()) {
      // accessToken失效，接口放入隊列，并刷新token
      if (!isRefreshing) {
        isRefreshing = true;
        const sData = {
          appID: SYSTEM_APPID,
          refreshToken: getRefreshToken(),
          timestamp: new Date().getTime(),
          version: '1.0'
        }
        store.dispatch('user/refreshToken', sData).then(res => {
          isRefreshing = false
          return res.item.accessToken
        }).then(token => {
          requests.forEach(cb => cb(token))
          requests = []
        }).catch(err => {
          isRefreshing = false
          console.error('refresh token error: ', err)
        })
      }
      const retryOriginalRequest = new Promise((resolve) => {
        requests.push((token) => {
          config.headers['Authorization'] = token
          resolve(config)
        })
      })
      return retryOriginalRequest
    } else {
      // accessToken有效
      const token = getAccessToken()
      if (token) {
        config.headers['Authorization'] = token
      }

      return config
    }
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

service.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    // const errMsg = (error.response && error.response.data && error.response.data.message) || error.message
    // Message({
    //   message: errMsg,
    //   type: 'error'
    // })
    switch (error.response.data.code) {
      case 910005: // 返回910005 缺失accessToken
      case 910006: // 返回910006 獲取SESSIONID失敗
      case 910007: // 返回910007 accessToken過期
      case 910008: // 返回910008 找不到用戶信息
      case 910009: // 返回910007 refreshToken過期
        goLoginPage()
        break
      default:
        console.log('err' + error)
    }
    return Promise.reject(error)
  }
)

//上傳附件axios接口封裝
const upload = {
  uploadFile(url, payload, cancelToken, cd) {
    return service({
      url: url,
      method: "post",
      data: payload,
      onUploadProgress: function(progressEvent) {
        if (cd && progressEvent.lengthComputable) {
          cd(progressEvent);
        }
      },
      cancelToken: cancelToken,
    });
  },
}
export {
  upload,
  service,
}
export default service

import request from '@/utils/request'

// 導(dǎo)出標(biāo)準(zhǔn)接口
export function exportProjectStandard(params){
  return  request({
    url: '/v1/inspectionstandard/exportProject',
    timeout: 60 * 60 * 60 * 1000, // 設(shè)置請求超時時間
    xhrFields: {
      withCredentials: true
    },
    method:'get',
    params,
    responseType: 'blob',
  });
}