后台传输数据流，前端接收数据流后并下载到本地，打开后中文乱码

最新推荐文章于 2024-07-24 11:44:54 发布

_小郭

最新推荐文章于 2024-07-24 11:44:54 发布

阅读量2.3k

点赞数 1

分类专栏： js文件下载文章标签： js文件下载

本文链接：https://blog.csdn.net/qq_43033251/article/details/96978513

版权

js文件下载专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需求就是：后台传输数据流，前端需要接收这个数据流，然后下载到本地
遇到的问题是：下载成功以后，打开文件的时候，只有中文乱码，本打算在前端这边找到方法，解决乱码，但是百度了很多方法，还是实现不了，最后解决就是：前后端编码格式必须保持一致(utf8)，tomact默认编码格式是gbk，前端设置编码为gbk，还是乱码，最后前后端编码都设置成了utf8

前后台通过node转发：
nodejs代码：

var opt = {
 method: 'GET',
 uri: 路径,
 headers:{
   fileName: this.request.query.fileName,
   filePath: this.request.query.filePath,
   Accept: 'text/plain;charset=utf-8',
   AcceptCharset: 'UTF-8'
 },
 json: true
};
var res = yield this.$(opt);
this.status = res.statusCode;
this.body = res.body;
this.type = 'blob'; //这句话要加上

前端代码：

$http({
  url:api,
  method: 'GET',
  params:{
    fileName:data.text,
    filePath:data.path
  },
  responseType: 'blob'   //这个要加上
})
  .then(function(res) {
    if (res.data.size != 0) {
    
          //blob对象有两个参数，第一个参数必须是数组，第二个设置类型
          let blob = new Blob([res.data], { type: 'text/plain;charset=utf-8' });
          
          //生成虚拟的url
          let objectUrl = window.URL.createObjectURL(blob);     
          let fileName = $scope.fileText;
          
          //给a标签设置href，点击的时候，通过访问虚拟的url将文件下载到本地
          $('#downloadFileSystemLog').attr('href', objectUrl);
          $('#downloadFileSystemLog').attr('download', `${fileName}`);
          $('#downloadModalSystemLog').modal('show');
    }

4.网上有很多样例，总之，中文乱码一定是编码格式的问题，编码格式要求，前后端必须保持一致