Vue下载txt格式的文件

2023年07月26日,天气,多云转阴

今天在做导出文件的时候,因包含有txt格式的文件,在导出的时候,浏览器会自动解析txt文件,而不是下载。于是快刀斩乱麻搜索资料,并结合总结,运用项目中,大功告成一半!因为导出时成功了,但txt文件下载下来后,内容包含中文,会乱码,于是又一顿输出,最终完成!总体思路就是,后端返回的txt文件路径,前端再请求一遍,请求的过程中设置返回的文本格式为:blob。然后再通过blob进行下载txt文件,下载的过程中设置编码格式。代码如下:

     //this.FileUrl:http:192.168.1.1:80//export/log.txt
      this.$axios.get(this.FileUrl, {
        responseType: 'blob' // 得到文件流
      }).then((response) => {
        // console.log(response)
        // 创建一个Blob对象,包含文本内容
        const blob = new Blob([response.data], { type: 'application/;charset=utf-8' })
        // 创建一个临时的a标签用于下载
        const a = document.createElement('a')
        a.href = URL.createObjectURL(blob)
        a.download = fileName
        // // 将a标签添加到文档中,触发点击事件,然后移除a标签
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
      })

这样,txt文件就可以直接下载保存了,而且不会乱码!

猜你喜欢

转载自blog.csdn.net/qq_39548550/article/details/131962699
今日推荐