在VUE中實(shí)現(xiàn)文件下載并判斷狀態(tài)的方法
更新時(shí)間：2019年11月08日 10:28:45 作者：yy406961
今天小編就為大家分享一篇在VUE中實(shí)現(xiàn)文件下載并判斷狀態(tài)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
新增JS頁(yè)面
axiosExport.JS
// Axios攔截請(qǐng)求并實(shí)現(xiàn)下載
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返回的東西可以跟后端確認(rèn)
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 // 鏈接錯(cuò)誤
})
export default axios
VUE頁(yè)面
import axios from './axiosExport'
// 導(dǎo)出 或 下載
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中實(shí)現(xiàn)文件下載并判斷狀態(tài)的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在vue項(xiàng)目中使用Jquery-contextmenu插件的步驟講解
今天小編就為大家分享一篇關(guān)于在vue項(xiàng)目中使用Jquery-contextmenu插件的步驟講解，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
Vuejs開(kāi)發(fā)環(huán)境搭建及熱更新【推薦】
Vue.js是目前很火的一個(gè)前端框架，采用MVVM模式設(shè)計(jì)，它是以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建的。本文重點(diǎn)給大家介紹Vuejs開(kāi)發(fā)環(huán)境搭建及熱更新的相關(guān)知識(shí)，需要的朋友參考下吧2018-09-09
Vue3中內(nèi)置組件Teleport的基本使用與典型案例
Teleport是一種能夠?qū)⑽覀兊哪０逡苿?dòng)到DOM中Vue app之外的其他位置的技術(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3中內(nèi)置組件Teleport的基本使用與典型案例的相關(guān)資料,需要的朋友可以參考下2023-04-04
本篇文章主要介紹了vue一步步實(shí)現(xiàn)alert功能，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
關(guān)于vue-router的beforeEach無(wú)限循環(huán)的問(wèn)題解決
本篇文章主要介紹了關(guān)于vue-router的beforeEach無(wú)限循環(huán)的問(wèn)題解決，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
在vue項(xiàng)目實(shí)現(xiàn)一個(gè)ctrl+f的搜索功能
剛剛接到領(lǐng)導(dǎo)通知，需要實(shí)現(xiàn)搜索功能，因?yàn)轫?xiàng)目是vue的而且是手機(jī)端，對(duì)我來(lái)說(shuō)有點(diǎn)小難度。經(jīng)過(guò)小編的一番思索最終還是解決了，今天小編把實(shí)現(xiàn)過(guò)程分享到腳本之家平臺(tái)，需要的朋友參考下2020-02-02
vue+element-ui+ajax實(shí)現(xiàn)一個(gè)表格的實(shí)例
下面小編就為大家分享一篇vue+element-ui+ajax實(shí)現(xiàn)一個(gè)表格的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
使用vue-cli創(chuàng)建項(xiàng)目并webpack打包的操作方法
本文給大家分享使用vue-cli創(chuàng)建項(xiàng)目基于webpack模板打包的配置方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-07-07
最近有個(gè)項(xiàng)目需求就是在客戶(hù)端的右上角要實(shí)時(shí)展示提醒消息,下面這篇文章主要給大家介紹了關(guān)于Vue通知提醒框(Notification)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
vue使用assign巧妙重置data數(shù)據(jù)方式
這篇文章主要介紹了vue使用assign巧妙重置data數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03