下载---当前端调用下载文件接口，接口通了，浏览器却没有下载文件（不一定好使）

1.下载文件封装

import request from './request'

export function download(url, params,filename) {
request({
method: 'get',
params: params,
url: url,
responseType: 'blob',
timeout: 0
}).then(res => {
resolveBlob(res, filename)
}).catch((error) => {
console.log(error)
for (let e in error) {
console.log(e, error[e])
}

});
}

if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, fileName);
} else {
aLink.href = URL.createObjectURL(blob)
aLink.setAttribute('download', fileName) // 设置下载文件名称
aLink.click()
window.URL.revokeObjectURL(aLink.href);
}
}

2.request请求封装

import axios from 'axios'
import qs from 'qs'
import {Message} from 'element-ui'
import md5 from 'js-md5'
import {getToken, getAccessToken} from "@/utils/auth";
import router from "@/router";
import store from "@/store";
import APP_CONFIG from "../config/config";

/** http error */
const HTTP_ERROR = {
UNAUTHORIZED: {
code: 401,
msg: '请求未授权',
},
FORBIDDEN: {
code: 403,
msg: '无权查看',
},
NOT_FOUND: {
code: 404,
msg: '请求地址不存在',
},
METHOD_NOT_ALLOWED: {
code: 405,
msg: '请求方式不支持',

},
NOT_ACCEPTABLE: {
code: 406,
msg: '请求被拒绝',
},
LENGTH_REQUIRED: {
code: 411,
msg: '长度受限',
},
UNSUPPORTED_MEDIA_TYPE: {
code: 415,
msg: '不支持的媒体类型',
},
SERVER_ERROR: {
code: 500,
msg: '服务器错误'
},
BAD_GATEWAY: {
code: 502,
msg: '服务器未响应'
},
SERVICE_UNAVAILABLE: {
code: 503,
msg: '当前服务暂不可用'
},
UNKNOWN: {
code: 996,
msg: '未知错误'
},
NETWORK_ERROR: {
code: -1,
msg: '网络错误'
}
}

/**sign key**/
const SIGN_KEY = '123456789';

/**
* sort & serialize query
* @param arg
* @returns {string}
*/
function prepareQuery(arg) {
const names = Object.keys(arg).sort()
let ret = ''
for (let i = 0; i < names.length; ++i) {
const name = names[i]
const val = arg[name]
if (val === false) {
ret += (name + '0')
} else if (val === true) {
ret += (name + '1')
} else if (typeof val === 'number') {
ret += (name + val)
} else if (typeof val === 'string') {
ret += (name + val)
} else if (Array.isArray(val)) {
ret += (name + val.join(','))
} else if (val) {
ret += (name + JSON.stringify(val))
} else {
ret += name
}
}
return ret
}

/**
* show error tips with element ui message component
* @param cfg
*/
function showErrorMessage(cfg) {
Message({
message: cfg.msg,
type: 'error',
duration: 5 * 1000
})
}

/**
* check token valid, if token expired ,refresh token
*/
function checkToken() {
let token = getToken();
if (token && isTokenNeedRefresh(token)) {
refreshToken();
}
}

/**
* check token expired time, if left time < expired/5, refresh token
* @param token
* @returns {boolean|boolean}
*/
function isTokenNeedRefresh(token) {
let now = new Date().getTime();
let expiredTime = token.ts + (token.expired * 1000);
let time = expiredTime - now;
return time > 0 && time < (token.expired / 5 * 1000)

}

/**
* refresh token
* simple implements, use old token to get new token
*/
function refreshToken() {
const time = String(new Date().getTime())
axios.get(baseURL + "/auth/refresh", {
headers: {
Authorization: getAccessToken(),
sign: md5(SIGN_KEY + time),
timestamp: time
}
}).then((res) => {
if (res.status === 200) {
if (res.data && res.data.code === 200 && res.data.data) {
let tokenObj = {
token: res.data.data.token,
expired: res.data.data.expired,
ts: new Date().getTime()
}
store.dispatch("user/setUserToken", tokenObj)
} else {
processSystemError(res)
}
}

}).catch((error) => {
processHttpError(error)
});
}

/**
* show system error message
* @param response
*/
function processSystemError(response) {
let cfg = {
code: response.data.code,
msg: response.data.msg,
}
showErrorMessage(cfg);
if (response.data.code === 601) {
router.push({
path: '/login'
});
}
}

/**
* show http error message
* @param error
*/
function processHttpError(error) {
let httpError = HTTP_ERROR.NETWORK_ERROR;
if (error.response) {
for (const httpStatus in HTTP_ERROR) {
let e = HTTP_ERROR[httpStatus];
if (e && e.code === error.response.status) {
httpError = e;
break;
}
}
}
showErrorMessage(httpError);
}

const baseURL = APP_CONFIG.VUE_APP_API_HOST_DEFAULT;

const service = axios.create({
baseURL: baseURL, // url = base url + request url
withCredentials: false, // do not need cookie
timeout: 1000 * 10
})

/** request interceptor */
service.interceptors.request.use(
config => {
// refresh token if expired
checkToken(config);
let serializedData = '';
if (config.method === 'get' || config.method === 'delete') {
if (config.params && Object.getOwnPropertyNames(config.params).length) {
serializedData = prepareQuery(config.params);
// array params formatter, a:[1,2,3] => a=1,2,3
config.paramsSerializer = function (params) {
return qs.stringify(params, {arrayFormat: 'comma'})
}
}
} else {
if (config.data && !(config.data instanceof FormData)) {
serializedData = JSON.stringify(config.data);
}
}
const time = String(new Date().getTime())
config.headers['timestamp'] = time
config.headers['sign'] = md5(SIGN_KEY + time + serializedData)
let accessToken = getAccessToken();
if (accessToken) {
config.headers['Authorization'] = accessToken;
}
return config
},
error => {
return Promise.reject(error)
}
)

/** response interceptor **/
service.interceptors.response.use(
response => {
if (response.status === 200) {
// pre-processing json response
if (response.headers['content-type'].indexOf("application/json") != -1) {
if (response.data.code === 200) {
return response.data
}else if(getToken().token === "mock"){
return response.data
} else {
processSystemError(response)
return Promise.reject(response.data)
}
} else {
return Promise.resolve(response);
}
}
},
error => {
processHttpError(error);
return Promise.reject(error)
}
)

export default service

3.使用

import {download} from '@/utils/download'
//批量导出
getExcel() {
download("/report/getAccident",this.baseQueryForm,"中粮贸易小事故信息统计报表.xlsx")
},

下载---当前端调用下载文件接口，接口通了，浏览器却没有下载文件（不一定好使）相关推荐

java 安卓 html文件怎么打开方式_android 浏览器打开本地html文件的方法
android 浏览器打开本地html文件的方法有些html文件放在本地磁盘和sdcard,如何用打开这个网页呢? 这种应用在测试时非常有用. 有2个方法: 1. 使用文件管理器如ES等,需要幸运 ...
为什么浏览器中有些文件点击后是预览，有些是下载
今天给大家分享两个比较有用的浏览器行为与预期不一致的现象,这两个问题其实并不是什么难题,但在工作中发现不少人被难住了,在我的印象中至少有三位同事在群里问这样的问题,上周又有同事被此现象困住了,所以我觉 ...
两步快速解决浏览器上传本地文件失败问题
两步快速解决浏览器上传本地文件失败问题学校教学平台上传作业总是没法弹出本地目录,经过查资料和试验,我总结了解决方法,只需两步. 使用到的浏览器 ie浏览器目录两步快速解决浏览器上传本地文件失败问 ...
微信或手机浏览器在线显示pdf文件
问题及解决在之前的文章中提到了如何在手机上显示office文件,这里提一下pdf文件如何在手机上展示.问题发生情况是,公司企业号会从OA系统定时获取信息,并且解析内网文章中的图片.文件,展示在微信中 ...
手机火狐浏览html文件在哪里,火狐手机浏览器书签在哪?
先来看看用狐火浏览器中添加的书签,这些书签就是要保存下来再次利用的第一种方法在电脑上一次找到C:\Documents and Settings\Administrator\Application ...
根据接口文档书写接口，并在前端调用接口返回显示出数据（加下载）
---恢复内容开始--- 1.首先来看接口文档(其中一个接口): 接口的编写: 1 /** 2 * 7.11 余额明细查询接口3 *4 *@paramtoken5 *@parampageNum6 * ...
微信扫描二维码在内置浏览器打不开文件的下载链接怎么办？哪些api接口可以解决...
有哪些api接口可以实现微信扫描二维码在内置浏览器打开文件的下载链接? 经常看到贴吧上有人吐槽微信的检测系统太严格了,动不动就拦截第三方链接.怎么才能解决,怎么才能避免等等一系列的问题.因为平时我也会 ...
swagger文档无法测试下载文件的接口解决方式
在开发中偶尔会遇到需要下载文件的接口,文件输入输出流的使用和转换的操作当接口开发完毕的时候去swagger文档中测试发现结果只是乱码如下图: swagger文档通常情况下是没法测试下载接口的,需要修 ...
FastDFS自定义水印的文件上传（前端调用后端接口）
之前写了普通的文件上传,考虑到可能有些公司的文件会有版权问题,因此加上带水印的文件上传功能. controller: /*** 文件上传带水印格式,支持PDF/图片* @param file* @pa ...

下载---当前端调用下载文件接口，接口通了，浏览器却没有下载文件（不一定好使）

下载---当前端调用下载文件接口，接口通了，浏览器却没有下载文件（不一定好使）相关推荐

最新文章

热门文章