Vue3 + mammoth.js 实现上传 docx 解析

负责一个报告需求的开发，领导希望可以上传 docx 文件，这样可以减少使用者的工作量。那没办法，那就开始吧

安装

npm install --save mammoth

笔者的版本："mammoth": "^1.5.1"

找到路由文件 router.js

const mammoth = () => import('mammoth')

{
  path: '/example',
  name: 'example',
  component: 'example',
  beforeEnter: (to, from, next) => {
    mammoth().then((mammothLoad) => {
      window.mammoth = mammothLoad
    })
    next()
  }
}

页面组件

<a-upload name="file" @change="handleChange" :showUploadList="false">
  <a-button :disabled="isDisabled">
    <upload-outlined></upload-outlined>
      上传 docx 文件并解析
  </a-button>
</a-upload>

const handleChange = (event) => {
  const file = event.file.originFileObj
  const reader = new FileReader()
  reader.onload = function (loadEvent) {
    const arrayBuffer = loadEvent.target.result
    window.mammoth.convertToHtml({ arrayBuffer: arrayBuffer }).then(function (resultObject) {
      contentVal.value = resultObject.value
    })
  }
  reader.readAsArrayBuffer(file)
}