1. 程式人生 > 其它 >gin+vue實現點選檔案流下載pdf等檔案,解決pdf和Png等圖片開啟新的視窗

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)

}