gin+vue實現點選檔案流下載pdf等檔案,解決pdf和Png等圖片開啟新的視窗
阿新 • • 發佈:2021-12-23
背景:我開始是直接點選伺服器目錄下的檔案,但是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)
}