Vue 使用docx-preview,渲染word后，继续其他操作（word中内容相关）的实现

1. 安装

npm install docx-preview

2. 页面引用

import { renderAsync } from "docx-preview";

3.页面使用插件

 <divclass="reader-docx"id="bodyContainer"style="justify-content: center; align-items: center;width:100%; height:100%;overflow:auto;"></div>

4. 读取接口返回的数据流

 getMyDoc(myParam).then((myRes) => {let data = myRes.data;try {// 如果能解析，则是失败结果let json = JSON.parse(data);that.$message.warning(data.message);} catch {// 成功if (data.type == "application/json") {let reader = new FileReader();reader.readAsText(data, "utf-8");reader.onload = (e) => {let readerres = reader.result;let parseObj = {};parseObj = JSON.parse(readerres);that.$message.warning(parseObj.message);};} else {let fr = new FileReader();fr.readAsArrayBuffer(data);fr.addEventListener("loadend",(e) => {let buffer = e.target.result;console.log("buffer", buffer);let bodyContainer =document.getElementById("bodyContainer");console.log("bodyContainer", bodyContainer);renderAsync(buffer, // Blob | ArrayBuffer | Uint8ArraybodyContainer, // HTMLElementnull, // HTMLElement, 用于呈现文档样式、数字、字体的元素。that.docxOptions // 配置).then(() => {...//  注意在这里处理后续相关内容，这里已经可以获取div中的文字});},false);}
});