在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) => {...});
}