java接口返回二进制附件流 接口返回二进制数据

接口返回为上传文档的线上地址

在浏览器打开为二进制文件流（现在是乱码的）

Step1.接收文件流

let wordUrl ="XXX"; //文档路径地址
      var axios = require("axios");
      var config = {
        method: "get",
        url: wordUrl,
        responseType: "blob"
      };
      axios(config).then(async res => {
        this.fileImg = await this.getBase64(res.data);//res.data为接收的文件流
        this.readExcelFromRemoteFile(this.fileImg);
      });

 Step2.二进制流转base64

getBase64(data) {
      const blob = new Blob([data], { type: "application/msword" }); //类型
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
      });
    },

 Step3.在线查看word文件

预览.doc文件可使用XDOC文档预览云服务

引用mammoth.js

安装 npm install --save mammoth

引入 import mammoth from "mammoth";

<div v-html="vHtml"></div>

readExcelFromRemoteFile(url) {
      var vm = this;
      var xhr = new XMLHttpRequest();
      xhr.open("get", url, true);
      xhr.responseType = "arraybuffer";
      xhr.onload = function() {
        if (xhr.status == 200) {
          mammoth
            .convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) })
            .then(function(resultObject) {
              vm.$nextTick(() => {
                vm.vHtml = resultObject.value;
              });
            });
        }
      };
      xhr.send();
    },

效果图

 Step4.导出文档

<span @click="exportWord(fileImg,'接口说明')">下载</span>

exportWord(url, name) {
      var link = document.createElement("a");
      link.href = url;
      link.download = name;
      link.click();
    }

导出时遇到了问题，导出的文档是乱码的，查了一下，我的情况是把mockJs注释掉就行了

原因：mockjs初始化了responseType，mockjs会影响到会影响原生的ajax请求，使得服务器返回的arraybuffer类型变成乱码

所以接收流的时候就是乱码的了，只是没看出来..

后端返回文件流，前端用blob转换后，下载的文件乱码或者打不开怎么解决_lala1091的博客_blob下载文件打不开

文章中引用的链接均为实现过程中，查到的内容，都给了我很大的帮助，感谢各位大佬的分享，赠人玫瑰，手留余香，我也把我的经验分享出来，希望能帮助到大家。