几行代码搞定electron-vue中文件的下载（原创，亲测必有效！！！）

目录

1.下载的原理

2.代码实战

(1) 后台代码

(2) 前台代码

---

最近在写gdb数据库的electron-vue客户端的时候，需要一个文件下载的功能，来下载excel，pdf以及压缩的7z文件，在经过各种百度和google之后依然没能解决，要么就是下载后的excel文件乱码，要么就是打不开，更别说下载pdf和压缩文件了

最终在经过自己的摸索之后发现只需要几行代码就可以搞定

1.下载的原理

在electron-vue中下载文件，我们需要使用file-saver这个第三方的js插件，使用方式很简单

saveAs(new Blob([contents]), fileName)

其中contents为文件内容的Uint8Array，在明白了这个原理之后下载文件就变得异常简单

(1) 在后台读取要下载的文件，并转成int类型的字节数组

(2) 前台拿到int类型的数组并转成Uint8Array

(3) 调用saveAs函数~

2.代码实战

(1) 后台代码

func (gdb *Gdb) downloadFileHandler(c *gin.Context)  {
	fileName := c.Param("fileName")
	contents := []int{}
	fileContent, _ := ioutil.ReadFile("./uploadFiles/" + fileName)
	for _, c := range fileContent {
		contents = append(contents, int(c))
	}
	r, _ := Json.Marshal(ResponseData{200, "", contents})
	c.String(200, "%s", r)
}

代码很简单，根据要下载的文件名去读取文件，需要注意的是读取到的结果是[]byte,即[]uint8,在这里必须要转成[]int类型才可以将字节传过去，否则传回前台的仍然是base64格式的字符串，这样前台下载就会出现很多问题（我之前就是在这里卡了好久。。）

(2) 前台代码

downloadFile(fileName).then(({data}) => {
        let contents = new Uint8Array(data.length)
        for(let i =0;i< data.length;i++){
          contents[i] = data[i]
        }
        saveAs(new Blob([contents]), fileName)
        this.$message.success(`文件${fileName}下载成功!`)
      }).catch(({message})=>{
         this.$notify({
           title: '下载失败',
           message
         })
      });

前台代码也很简单，向服务器发送请求，拿到对应的[]int数据，并转成Uint8Array,然后调用saveAs保存文件，即成功完成下载！！！