后端传的二进制流，ajax导出excel文件乱码怎么解决

在后端传输二进制流时，需要设置正确的Content-Type和Content-Disposition，以确保浏览器可以正确解析文件。

在前端使用ajax导出Excel文件时，需要将二进制流转换为blob对象，并设置下载链接的href属性为blob URL。同时，还需要设置下载链接的download属性，以指定文件名和文件类型。

如果出现乱码问题，可能是由于文件编码不匹配或浏览器解析错误导致的。可以尝试在后端设置正确的编码方式，或者在前端对二进制流进行一些处理，例如使用FileSaver.js库来下载文件。

相关问题

后端返回二进制文件流,前端vue实现在线预览

后端可以返回二进制文件流给前端，前端使用Vue框架可以实现在线预览这些文件。

首先，后端需要将文件以二进制流的形式返回给前端。可以使用一些常见的后端语言和框架，如Java的Spring Boot、Python的Django等。在后端，可以通过读取文件的字节数据，再将字节数据以流的形式返回给前端。

在前端，使用Vue框架可以方便地处理二进制文件流并实现在线预览。首先，前端需要获取到后端返回的文件流，在Vue的组件中通过调用后端的API接口获取文件的二进制数据。

获取到二进制数据后，可以使用FileReader对象将文件流转换成可读的文件对象。通过FileReader的readAsDataURL方法，可以将二进制数据转换成DataURL格式，这个格式可以直接在HTML的img标签中使用。

在Vue的模板中，可以使用<img>标签来展示转换后的DataURL格式的文件数据。设置这个标签的src属性为转换后的DataURL数据，就可以在页面上实时预览文件了。

需要注意的是，不同类型的文件可能需要使用不同的处理方式。例如，图片文件可以直接在<img>标签中展示，而音频文件和视频文件可能需要使用特定的播放器插件。根据不同的文件类型，选择合适的方式来实现在线预览。

总结来说，后端返回二进制文件流，前端Vue框架可以通过调用后端API接口获取文件数据，并通过FileReader将二进制数据转换成可读的文件对象，使用<img>标签或其他特定的插件进行在线预览。

html 录音传给后端二进制文件流

要将 HTML 中录音的二进制文件流传给后端，可以使用 JavaScript 的 XMLHttpRequest 对象来实现。

首先，使用 HTML5 的 getUserMedia API 获取录音的 MediaStream 对象，然后将其转换为 Blob 对象：

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(function(stream) {
    // 创建 MediaRecorder 对象，录制音频
    var mediaRecorder = new MediaRecorder(stream);
    var chunks = [];
    mediaRecorder.ondataavailable = function(e) {
      chunks.push(e.data);
    }
    mediaRecorder.onstop = function(e) {
      var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
      // 将 Blob 对象传给后端
      sendBlobToServer(blob);
    }
    // 开始录音
    mediaRecorder.start();
    // 5秒后停止录音
    setTimeout(function() {
      mediaRecorder.stop();
    }, 5000);
  })
  .catch(function(err) {
    console.log('getUserMedia error: ' + err);
  });

接下来，使用 XMLHttpRequest 对象将 Blob 对象传给后端：

function sendBlobToServer(blob) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.onload = function(e) {
    if (this.status == 200) {
      console.log('上传成功');
    }
  };
  var formData = new FormData();
  formData.append('file', blob);
  xhr.send(formData);
}

在后端接口中，可以使用类似以下的代码来接收二进制文件流：

app.post('/upload', function(req, res) {
  var file = req.files.file;
  var fileStream = fs.createReadStream(file.path);
  // 处理文件流
  ...
});

注意，上述代码中的 `/upload` 接口需要使用 multipart/form-data 编码来上传文件。如果需要上传其他类型的文件，可以更改 Blob 对象的 type 属性，或者在 FormData 中添加第三个参数，指定文件名和类型。