在VUE中实现文件下载并判断状态的方法

网络编程 2021-07-04 15:02www.168986.cn编程入门
今天长沙网络推广就为大家分享一篇在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.suess('下载成功!')
    } else {
      me.$message.warning('下载失败!')
    }
  }).catch(function (response) {
    console.log(response);
  });
}

以上这篇在VUE中实现文件下载并判断状态的方法就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by