Vue如何读取docx文件，这里有答案

在Vue中如何读取docx文件里面的内容

一、安装需要的插件

这里需要用到mammoth.js插件 github

yarn add mammoth

# 还需要依赖
yarn add util
yarn add path
yarn add browserify-path

二、添加vue.webpack.js配置

配置如下

chainWebpack: (config) => {
  config.plugin("define").tap((args) => {
    args[0]["process"] = { ...args[0]["process.env"] };
    return args;
  });
},

三、代码使用

import mammoth from "mammoth";

function selectFile(accept = ".docx") {
  return new Promise((resolve, reject) => {
    const fileInput = document.createElement("input");
    fileInput.type = "file";
    fileInput.accept = accept;
    fileInput.style.display = "none";

    fileInput.addEventListener("change", (event) => {
      if (!event || !event.target) {
        reject({ message: "请选择文件" });
      }
      const selectdFile = (event.target as HTMLInputElement).files?.[0];
      const isDocx = selectdFile?.name.endsWith(".docx");
      if (selectdFile) {
        const render = new FileReader();
        render.onload = (e) => {
          const content = e.target?.result as string | ArrayBuffer;

          mammoth
	        .extractRawText({ arrayBuffer: content as ArrayBuffer })
	        .then((res) => {
	          resolve(res.value);
	        });
        };

        render.readAsArrayBuffer(selectdFile);
      } else {
        reject({ message: "请选择有效的文件" });
      }

      document.body.removeChild(fileInput);
    });

    document.body.appendChild(fileInput);
    fileInput.click();
  });
}

四、使用方法

直接在其他方法中调用就可以了如下：

function onSelectFile() {
  selectFile()
    .then((res) => {...});
}