gin+vue实现点击文件流下载pdf等文件,解决pdf和Png等图片打开新的窗口
背景:我开始是直接点击服务器目录下的文件,但是Pdf、Png会打开的新的窗口,
我在后端的保存文件信息进数据库的时候,多加了一个后端服务器文件地址存储字段,用于前端传递给后端下载文件
vue前端
<el-table-column
prop="Url"
label="操作">
<template v-slot="scope">
<!--下载文件按钮-->
<el-button size="mini" type="warning" @click="downloadFile(scope.row)">软件下载1</el-button>
</template>
</el-table-column>
// 点击下载文件
// @@@path:文件的下载链接(后端认可的服务目录):./static/file/ProductFile/5--29228aec-acb9-41c6-af4e-d0ed21c4399b--jq22baiduMap5804201707041110.zip
async downloadFile(row) {
//使用qs formdata
const postData = qs.stringify({
path: row.DownloadLink,
}, );
this.$http({
method: 'post',
url: 'Product/DownloadFile',
/* params: {
'path': './static/file/ProductFile/5--e9eee2d9-8df0-488d-8626-7a7d6b3d7d6b--售后工程师转正考试.pdf'
},*/
data:postData,
responseType: "blob"
}).then(res => {
// console.log(res)
// const fileName = res.headers["content-disposition"].split("=")[1];
const _res = res.data;
let blob = new Blob([_res], {type: 'application/pdf'});
let downloadElement = document.createElement("a");
let href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href = href;
downloadElement.download = row.UploadOldName; //下载后文件名
// downloadElement.download = name; //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象
})}
后端
//13-实现文件的下载
func DownloadFile(c *gin.Context) {
//获取前端发送的文件路径
//直接传个文件流到前端即可
//filePath := c.Query("path")
//c.Header("Content-Type", "application/octet-stream")
path := strings.TrimSpace(c.PostForm("path"))
fmt.Println(path)
c.File(path)
//c.File(filePath)
}