接口返回二进制文件流在线文档的预览及下载

没有昵称的昵称lf

已于 2023-01-29 15:24:56 修改

阅读量1.6k

点赞数

文章标签：前端 javascript json

于 2023-01-05 18:52:59 首次发布

本文链接：https://blog.youkuaiyun.com/m0_48308579/article/details/128568375

版权

文章讲述了在前端通过接口获取二进制文件流，如何将文件流转化为base64并使用mammoth.js预览Word文档，以及在下载时遇到的乱码问题，解决方案是处理mockjs对原生ajax请求的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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);
      });
    },

类型可参考Blob 下载文件时 type 类型大全_派大星1的博客-优快云博客_blob type

令附文件流互相转换（blob转base64,二进制流）_卷毛崽的博客-优快云博客_blob转base64

Step3.在线查看word文件

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

【Vue实用功能】Vue实现文档在线预览功能，在线预览PDF、Word、Excel、ppt等office文件_vue word在线预览_周围都是小趴菜的博客-优快云博客

引用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();
    },

【Vue项目实践】实现在线预览word文件、excel文件https://blog.youkuaiyun.com/Sabrina_cc/article/details/121979484

效果图

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下载文件打不开

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