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


Posted in Javascript onNovember 08, 2019

新增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中实现文件下载并判断状态的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 页面自动加载函数(兼容多浏览器)
May 18 Javascript
Javascript 解疑
Nov 11 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
Aug 09 Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 Javascript
jquery不常用方法汇总
Jul 26 Javascript
常用的Javascript设计模式小结
Dec 09 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
浅析Vue中method与computed的区别
Mar 06 Javascript
详解基于vue的服务端渲染框架NUXT
Jun 20 Javascript
微信小程序实现打卡签到页面
Sep 21 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 #Javascript
vue 组件内获取actions的response方式
Nov 08 #Javascript
在vue中使用vuex,修改state的值示例
Nov 08 #Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 #Javascript
详解Vscode中使用Eslint终极配置大全
Nov 08 #Javascript
Vue实例的对象参数options的几个常用选项详解
Nov 08 #Javascript
Vuex中实现数据状态查询与更改
Nov 08 #Javascript
You might like
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
php笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
javascript生成随机数的方法
2014/05/16 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
Angular2使用jQuery的方法教程
2017/05/28 jQuery
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
2017/12/10 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
美国本地交易和折扣网站:LocalFlavor.com
2017/10/26 全球购物
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
JD Sports比利时官网:英国领先的运动鞋和运动服饰零售商
2018/10/10 全球购物
网络安全方面的面试题
2015/11/04 面试题
幼教个人求职信范文
2013/12/02 职场文书
最新奶茶店创业计划书
2014/01/25 职场文书
县优秀教师事迹材料
2014/01/31 职场文书
人大代表选举标语
2014/10/07 职场文书
检讨书范文500字
2015/01/28 职场文书
个人年终总结开头
2015/03/06 职场文书
公务员处分决定书
2015/06/25 职场文书
初中历史教学反思
2016/02/19 职场文书
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书
索尼ICF-36收音机评测
2022/04/30 无线电