欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-01-31 16:10:04
...
  1. 需求就是:后台传输数据流,前端需要接收这个数据流,然后下载到本地

  2. 遇到的问题是:下载成功以后,打开文件的时候,只有中文乱码,本打算在前端这边找到方法,解决乱码,但是百度了很多方法,还是实现不了,最后解决就是:前后端编码格式必须保持一致(utf8),tomact默认编码格式是gbk,前端设置编码为gbk,还是乱码,最后前后端编码都设置成了utf8

  3. 前后台通过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.网上有很多样例,总之,中文乱码一定是编码格式的问题,编码格式要求,前后端必须保持一致