Django+Vue实现各样式文件下载

Django:

# 这里返回一个迭代器,防止文件过大将内存打满,这样可以保证服务的占用内存几乎没有波动
def read_file(file_name, buf_size=409600):
    with open(file_name, "rb") as f:
        while True:
            c = f.read(buf_size)
            if c:
                yield c
            else:
                break


@action(detail=False, methods=['POST'])
def export_templates(self, request, *args, **kwargs):
	file_name = "取的名字根据项目上下文决定"
	# 使用文件流的方式返回
	res = StreamingHttpResponse(read_file(file_name))
	# 增加headers
	res['Content-Type'] = 'application/octet-stream'
	res['Access-Control-Expose-Headers'] = "Content-Disposition, Content-Type"
	res['Content-Disposition'] = "attachment;"
	return res

Vue:

这里对axios的封装就不说了
axios请求的参数: url,方法名,参数,responseType要带上:
url: ‘xxxx’,
method: ‘post’,
responseType: ‘blob’,
data
请求后返回的response处理:

	.then(response => {
		const filename = "xxx" + '.tar'
		const blob = new Blob([response], {
		  type: 'application/x-tar'
		})
		// console.log("fileName",fileName)
		if (window.navigator.msSaveOrOpenBlob) {
		  navigator.msSaveBlob(blob, filename)
		} else {
		  var link = document.createElement('a')
		  link.href = window.URL.createObjectURL(blob)
		  link.download = filename
		  link.click()
		  // 释放内存
		  window.URL.revokeObjectURL(link.href)
		}
	})

tips:

• blob的type选择:

参考自:https://blog.csdn.net/Zhuangvi/article/details/121063203