【vue】Mammoth.js的使用：将.docx和doc 文件转换成HTML

mammoth.convertToHtml(input, options） ：把源文档转换为 HTML 文档
mammoth.convertToMarkdown(input, options) ：把源文档转换为 Markdown 文档。
mammoth.extractRawText(input) ：提取文档的原始文本。这将忽略文档中的所有格式。每个段落后跟两个换行符。

 npm install element-ui mammoth     插件

主要内容：

// 进行解析
const type = file.name.substring(file.name.lastIndexOf('.') + 1)   // 获取到的是文件类型
const reader = new FileReader()
reader.readAsArrayBuffer(file)
reader.onload = e => {const data = reader.resultmammoth.convertToHtml({ arrayBuffer: data }).then(r => {this.uploadListflow = r.value  // 获取到解析出来的内容})
}

 完整代码：

<template><div class="upload-file"><el-uploadmultiple:action="uploadFileUrl":before-upload="handleBeforeUpload":file-list="fileList":limit="limit":on-error="handleUploadError":on-exceed="handleExceed":on-success="handleUploadSuccess":show-file-list="false":headers="headers"class="upload-file-uploader"ref="fileUpload"><!-- 上传按钮 --><el-button size="mini">上传文件</el-button><!-- 上传提示 --><div class="el-upload__tip" slot="tip" v-if="showTip"><template v-if="fileType">格式仅限{{ fileType.join("/") }}</template><template v-if="fileSize">最大{{ fileSize }}MB</template>的文件</div></el-upload><!-- 文件列表 --><transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul"><li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList"><el-link :href="`${file.url}`" :underline="false" target="_blank"><span class="el-icon-document"> {{ getFileName(file.name) }} </span></el-link><div class="ele-upload-list__item-content-action"><el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link></div></li></transition-group></div>
</template><script>
import { getToken } from "@/utils/auth";
import { listByIds, delOss } from "@/api/system/oss";
import mammoth from 'mammoth';   // 插件 解析doc和docx文件export default {name: "FileUpload",props: {// 值value: [String, Object, Array],// 数量限制limit: {type: Number,default: 1,},// 大小限制(MB)fileSize: {type: Number,default: 50,},// 文件类型, 例如['png', 'jpg', 'jpeg']fileType: {type: Array,default: () => ["doc", "docx"],},// 是否显示提示isShowTip: {type: Boolean,default: true}},data() {return {number: 0,uploadList: [],baseUrl: process.env.VUE_APP_BASE_API,uploadFileUrl: process.env.VUE_APP_BASE_API + "xxxx", // 上传文件服务器地址headers: {Authorization: "Bearer " + getToken(),},fileList: [],uploadListflow:''};},watch: {value: {async handler(val) {if (val) {let temp = 1;// 首先将值转为数组let list;if (Array.isArray(val)) {list = val;} else {// await listByIds(val).then(res => {//   list = res.data.map(oss => {//     oss = { name: oss.originalName, url: oss.url, ossId: oss.ossId };//     return oss;//   });// })}// 然后将数组转为对象数组this.fileList = list.map(item => {item = { name: item.name, url: item.url, ossId: item.ossId };item.uid = item.uid || new Date().getTime() + temp++;return item;});} else {this.fileList = [];return [];}},deep: true,immediate: true}},computed: {// 是否显示提示showTip() {return this.isShowTip && (this.fileType || this.fileSize);},},methods: {// 上传前校检格式和大小handleBeforeUpload(file) {// 校检文件类型if (this.fileType) {const fileName = file.name.split('.');const fileExt = fileName[fileName.length - 1];const isTypeOk = this.fileType.indexOf(fileExt) >= 0;if (!isTypeOk) {this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);return false;}}// 校检文件大小if (this.fileSize) {const isLt = file.size / 1024 / 1024 < this.fileSize;if (!isLt) {this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);return false;}}this.$modal.loading("正在上传文件，请稍候...");this.number++;// 进行解析const type = file.name.substring(file.name.lastIndexOf('.') + 1)const reader = new FileReader()reader.readAsArrayBuffer(file)reader.onload = e => {const data = reader.resultmammoth.convertToHtml({ arrayBuffer: data }).then(r => {this.uploadListflow = r.value  // 获取到解析出来的内容})}return true;},// 文件个数超出handleExceed() {this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);},// 上传失败handleUploadError(err) {this.$modal.msgError("上传文件失败，请重试");this.$modal.closeLoading();},// 上传成功回调handleUploadSuccess(res, file) {if (res.code === 200) {this.uploadList.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId });this.uploadedSuccessfully();// 将解析出来的内容传递出去this.$emit("inputflow", this.uploadListflow);} else {this.number--;this.$modal.closeLoading();this.$modal.msgError(res.msg);this.$refs.fileUpload.handleRemove(file);this.uploadedSuccessfully();// 将解析出来的内容传递出去this.$emit("inputflow", this.uploadListflow);}},// 删除文件handleDelete(index) {let ossId = this.fileList[index].ossId;delOss(ossId);this.fileList.splice(index, 1);this.$emit("input", this.listToString(this.fileList));// 点击删除 也将解析出来的内容删除掉this.$emit("inputflow", '');},// 上传结束处理uploadedSuccessfully() {if (this.number > 0 && this.uploadList.length === this.number) {this.fileList = this.fileList.concat(this.uploadList);this.uploadList = [];this.number = 0;this.$emit("input", this.listToString(this.fileList));this.$modal.closeLoading();}},// 获取文件名称getFileName(name) {// 如果是url那么取最后的名字 如果不是直接返回if (name.lastIndexOf("/") > -1) {return name.slice(name.lastIndexOf("/") + 1);} else {return name;}},// 对象转成指定字符串分隔listToString(list, separator) {let strs = "";separator = separator || ",";for (let i in list) {strs += list[i].ossId + separator;}return strs != "" ? strs.substr(0, strs.length - 1) : "";},},
};
</script><style scoped lang="scss">
::v-deep .el-upload {margin: 20px 0px 5px 45px !important;
}
::v-deep .el-button{width:150px !important;
}::v-deep .el-upload__tip {width: 95% !important;margin: auto !important;
}
.upload-file-uploader {margin-bottom: 5px;
}
.upload-file-list .el-upload-list__item {border: 1px solid #e4e7ed;line-height: 2;margin-bottom: 10px;position: relative;
}
.upload-file-list .ele-upload-list__item-content {display: flex;justify-content: space-between;align-items: center;color: inherit;
}
.ele-upload-list__item-content-action .el-link {margin-right: 10px;
}
</style>

 【js】Mammoth.js的使用：将.docx 文件转换成HTML_mammoth.converttohtml-CSDN博客


vue 上传本地文件后预览文件内容（支持txt，xlsx，doc） - Stitchhhhh - 博客园