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