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

1. 安装

npm install docx-preview

2. 页面引用

import { renderAsync } from "docx-preview";

3.页面使用插件

 <div
        class="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 | Uint8Array
                              bodyContainer, // HTMLElement
                              null, // HTMLElement, 用于呈现文档样式、数字、字体的元素。
                              that.docxOptions // 配置
                            ).then(() => {
                                ...
                              //  注意在这里处理后续相关内容，这里已经可以获取div中的文字
                            });
                          },
                          false
                        );
                      }
});