在VUE中实现文件下载并判断状态的方法_晴枙_前端开发者

新增js页面

axiosExport.js

// Axios拦截请求并实现下载
import axios from 'axios'

// download url
export const downloadUrl = (url) => {
  console.log(url)
  let iframe = document.createElement('iframe')
  iframe.style.display = 'none'
  iframe.src = url
  iframe.onload = function () {
    document.body.removeChild(iframe)
  }
  document.body.appendChild(iframe)
}

// Add a response interceptor
// res返回的东西可以跟后端确认
axios.interceptors.response.use(res => {
  if (res.data.status && res.data.status === 300) {
    return '300' // 链接正确,下载失败
  } else {
    downloadUrl(res.request.responseURL)
    return '200' // 链接正确,下载成功
  }
}, error => {
  // Do something with response error
  return error // 链接错误
})

export default axios

vue页面

import axios from './axiosExport'
// 导出 或 下载
exportDoc () {
  let URL = `下载地址`
  let me = this
  axios.get(URL).then(function (response) {
    if (response === '200') {
      me.$message.success('下载成功!')
    } else {
      me.$message.warning('下载失败!')
    }
  }).catch(function (response) {
    console.log(response);
  });
}

以上这篇在vue中实现文件下载并判断状态的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持前端开发者。

» 本文来自:前端开发者 » 《在VUE中实现文件下载并判断状态的方法_晴枙_前端开发者》
» 本文链接地址:https://www.rokub.com/71266.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!