背景:我開始是直接點擊服務器目錄下的文件,但是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)
}