Vue+Axios从后端下载文件

小龙狗

已于 2023-02-23 19:27:31 修改

阅读量585

点赞数

分类专栏： Python编程 Web编程文章标签： vue.js 前端 javascript django python

于 2022-10-10 22:18:35 首次发布

本文链接：https://blog.csdn.net/ShyLoneGirl/article/details/127253557

版权

Python编程同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

Web编程

29 篇文章 0 订阅

订阅专栏

1. 后端

基于 django 。

from django.http import StreamingHttpResponse

	dPicPath = os.path.join(path, "shuge.tiff")
	response = StreamingHttpResponse(open(dPicPath, 'rb'))
	response['content_type'] = "application/octet-stream"
	response['Content-Disposition'] = 'attachment; filename=' + os.path.basename(dPicPath )
	return response

2. 前端

methods: {
	async downResult(record, row, index) {
		let token = Cookies.get("token");
		let formdata = new FormData();
	    formdata.append("id", this.queryId);
	    axios({
	    	method: "get",
	        url: "127.0.0.1/getfile/"
	        responseType: "blob",
	        headers: {
	          authorization: "Bearer " + token,
	          "Content-Type": "application/json",
	        },
	    }).then((res) => {
	        const blob = new Blob([res.data], { type: "image/tiff" });
	        let patt = new RegExp("filename=([^;]+\\.[^\\.;]+);*");
	        let contentDisposition = res.headers["content-disposition"];
	        let result = patt.exec(contentDisposition);
	        let fileName = decodeURI(result[1]);
	        const elink = document.createElement("a");
	        elink.download = fileName;
	        elink.style.display = "none";
	        elink.href = URL.createObjectURL(blob);
	        document.body.appendChild(elink);
	        elink.click();
	        URL.revokeObjectURL(elink.href); // 释放URL 对象
	        document.body.removeChild(elink);
      });
    },
}

桃花仙人种桃树_又摘桃花换酒钱_ 桃花仙人种桃树_又摘桃花换酒钱_ 桃花仙人种桃树_又摘桃花换酒钱_ 桃花仙人种桃树_又摘桃花换酒钱_ 桃花仙人种桃树_又摘桃花换酒钱_ 桃花仙人种桃树_又摘桃花换酒钱_ 桃花仙人种桃树_又摘桃花换酒钱_ 桃花仙人种桃树_又摘桃花换酒钱_ 桃花仙人种桃树_又摘桃花换酒钱_ 桃花仙人种桃树_又摘桃花换酒钱_

.
.
.
.
.
.

桃花仙人种桃树，又摘桃花换酒钱_