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)

}
posted @ 2021-12-23 14:06  成强  阅读(1268)  评论(0编辑  收藏  举报