前端预览doc/docx文件

2,201 阅读1分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

在进行开发的时候遇到过这样一个需求,指的是后端返回一个路径,根据该路径可下载一个excel文件,但是需求是还需要通过该路径在前端做一个预览,最后经过不懈的努力,终于找到了解决的办法。

第一步
下载需要下载一个插件

npm i docx-preview

该 docx-preview 插件只能预览doc或者docx文件的数据流
第二步
调用接口获取数据流数据

    method: "get",
    responseType: "blob",  //注意
    url: url,  //后端返回的数据流接口地址
  }).then(({ data }) => {
    docx.renderAsync(data, dome.value); // 渲染到页面  dome.value 为元素的ref值
  });

其中data为通过该接口获取返回的数据流数据,dome.value指的是获取html中的dom元素