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)

}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM