【错误记录/js】保存octet-stream为文件后数据错乱

说在前面

• 后端：go、gin
• 浏览器：Microsoft Edge 120.0.2210.77 (正式版本) (64 位)

场景

• 前端通过点击按钮来下载一些文件，但是文件内容是一些非文件形式存储的二进制数据。
• 后端代码

  		r := gin.Default()r.Static("/home", "./public")r.GET("/down", func(c *gin.Context) {type A struct {B uint   `json:"B"`C string `json:"C"`}a := &A{B: 746,C: "sjdfksdjlvsj",}fileName := "aaa"c.Header("Content-Type", "application/octet-stream")c.Header("Content-Disposition", "attachment; filename="+fileName)// c.Header("Content-Transfer-Encoding", "binary")c.Header("Cache-Control", "no-cache")var save bytes.Buffer// 使用gob的序列化进行测试enc := gob.NewEncoder(&save)enc.Encode(a)// 保存到本地用于对比file, err := os.OpenFile("test.txt", os.O_CREATE, 0)if err != nil {fmt.Println(err)return}defer file.Close()file.Write(save.Bytes())// 返回到前端c.Data(http.StatusOK, "application/octet-stream", save.Bytes())
  })
  r.Run() 
  

• js代码

  
  function downloadBlob(data) {console.log([data])const anchor = document.createElement('a');document.body.appendChild(anchor);var url = window.URL.createObjectURL(new Blob([data]));anchor.href = url;anchor.download = "file.txt"anchor.click();document.body.removeChild(anchor);
  }
  function downloadFileBlob() {// 使用axios请求数据axios.get("/down").then((response) => {downloadBlob(response.data);})
  }
  

• 对比发现数据对不上(左：js保存 右：本地文件保存)
  

解决方式

• 尝试发现不需要使用axios，直接使用链接就行

     function downloadFile() {const anchor = document.createElement('a');anchor.href = "/down";document.body.appendChild(anchor);anchor.click();document.body.removeChild(anchor);}
  

• 结果一致了
  

其他

• 具体为什么会导致这种差异，查了一些资料，大概率是编码上的问题，后面有时间再详细查。