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

本文主要是介绍【错误记录/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);}