vue-下载后端返回的文件流（post）
vue
<script>
import axios from 'axios'
import {MessageBox, Message} from 'element-ui'
import {Loading} from 'element-ui'
const http = axios.create({
// baseURL: process.env.VUE_APP_BASE_API,
baseURL: process.env.VUE_APP_BASE_API,
timeout: 60000,
withCredentials: true
})
export default {
methods:{
/**
* 下载 url：后台地址 data：需要导出的数据 fileName：文件名
* @param url
* @param data
*/
download(url, data, fileName) {
return new Promise((resolve, reject) => {
// 打开
const loading = Loading.service({
text: '正在下载数据...',
background: 'rgba(0, 0, 0, 0.7)'
})
http.request({
url: url,
method: 'post',
data: data,
timeout: 1200000,
responseType: 'arraybuffer'
})
.then(res => {
loading.close()
// 文件下载
const blob = new Blob([res.data], {
type: 'application'
})
// 获得文件名称
let link = document.createElement('a')
link.download = fileName
link.style.display = 'none'
link.href = URL.createObjectURL(blob)
document.body.appendChild(link)
link.setAttribute('download', fileName + '.xls')
link.click()
URL.revokeObjectURL(link.href);
document.body.removeChild(link);
link = null
Message.success('导出成功!')
})
.catch(err => {
loading.close()
reject(err)
})
})
},
}
}
</script>
django
def export(self, request):
...... 获取数据根据实际情况获取
# 假设数据是这样的
ret = [[1, 'tom', 2], [2, 'jerry', 1]]
import pandas as pd
df = pd.DataFrame(ret, columns=['id', 'name', 'age'])
# 利用pandas将数据存入excel文件中
from io import BytesIO
bio = BytesIO()
writer = pd.ExcelWriter(bio, engine='xlsxwriter') # 注意安装这个包 pip install xlsxwriter
df.to_excel(writer, sheet_name='Sheet1')
writer.save()
bio.seek(0)
# bio.read() 不要read出来，否则seek就到文件最后了，导致下载的是空文件
# 至此，数据已写入bio中
from django.http import FileResponse
response = FileResponse(bio)
response['Content-Type'] = 'application/octet-stream'
response['Content-Disposition'] = 'attachment;filename="mm.xlsx"'
return response
上传文件
vue
<script>
import axios from 'axios'
import {MessageBox, Message} from 'element-ui'
import {Loading} from 'element-ui'
const http = axios.create({
// baseURL: process.env.VUE_APP_BASE_API,
baseURL: process.env.VUE_APP_BASE_API,
timeout: 60000,
withCredentials: true
})
methods:{
/**
* 上传
* @param url
* @param data
*/
upload (url, file, data) {
const formData = new FormData()
formData.append('file', file)
// 附加数据
if (data) {
Object.keys(data).forEach(key => {
formData.append(key, data[key])
})
}
return new Promise((resolve, reject) => {
// 打开
const loading = Loading.service({
text: '正在上传数据...',
background: 'rgba(0, 0, 0, 0.7)'
})
http
.request({
url: url,
method: 'post',
data: formData,
timeout: 1200000
})
.then(response => {
console.log(response)
loading.close()
resolve(response)
})
.catch(err => {
loading.close()
reject(err)
})
})
}
}
</script>
汇总
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import { Loading } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
// 请求实例
const http = axios.create({
// baseURL: process.env.VUE_APP_BASE_API,
baseURL: process.env.VUE_APP_BASE_API,
timeout: 60000,
withCredentials: true
})
// 请求前置过滤器
http.interceptors.request.use(
config => {
if (store.getters.token) {
config.headers['token'] = getToken()
}
return config
},
error => {
console.log(error)
return Promise.reject(error)
}
)
// 响应数据拦截并做通用处理
http.interceptors.response.use(
response => {
const res = response.data
// 下载文件直接返回
if (res.type === 'application/octet-stream') {
return response
}
if (res.type === 'application/vnd.ms-excel') {
return response
}
// 0为正确响应码
// if (res.code !== 0 ) {
// Message({
// message: res.msg || 'Error',
// type: 'error',
// duration: 5 * 1000
// })
//
// // 登录超时响应码
if (res.code != 200 && res.message == '暂未登录或token已经过期') {
// to re-login
MessageBox.confirm('登录超时，请重新登录！', '登录提示', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
store.dispatch('user/resetToken').then(() => {
location.reload()
})
})
} else {
return res
}
},
error => {
console.log('err' + error)
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
/**
* 上传
* @param url
* @param data
*/
export function upload (url, file, data) {
const formData = new FormData()
formData.append('file', file)
// 附加数据
if (data) {
Object.keys(data).forEach(key => {
formData.append(key, data[key])
})
}
return new Promise((resolve, reject) => {
// 打开
const loading = Loading.service({
text: '正在上传数据...',
background: 'rgba(0, 0, 0, 0.7)'
})
http
.request({
url: url,
method: 'post',
data: formData,
timeout: 1200000
})
.then(response => {
console.log(response)
loading.close()
resolve(response)
})
.catch(err => {
loading.close()
reject(err)
})
})
}
/**
* 下载
* @param url
* @param data
*/
export function download (url, data, fileName) {
return new Promise((resolve, reject) => {
// 打开
const loading = Loading.service({
text: '正在下载数据...',
background: 'rgba(0, 0, 0, 0.7)'
})
http
.request({
url: url,
method: 'post',
data: data,
timeout: 1200000,
responseType: 'arraybuffer'
})
.then(res => {
loading.close()
// 文件下载
const blob = new Blob([res], {
type: 'application'
})
// 获得文件名称
let link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.setAttribute('download', fileName)
link.click()
link = null
Message.success('导出成功!')
})
.catch(err => {
loading.close()
reject(err)
})
})
}
/**
* 封装post请求
* @param url
* @param data
* @returns {Promise}
*/
export function post (url, data = {}) {
return new Promise((resolve, reject) => {
http.post(url, data).then(
response => {
resolve(response)
},
err => {
reject(err)
}
)
})
}
export default http
