需要依赖:
element (https://element.eleme.cn/#/zh-CN/component/upload)
mammoth (https://www.npmjs.com/package/mammoth)
步骤1.
<el-upload
class="upload-demo"
ref="upload"
action=""
:show-file-list="false"
:on-change="fileChange"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
</el-upload>
步骤2.
下载mammoth
npm install mammoth
引入mammoth
var mammoth = require('mammoth')
步骤3.
// new FileReader()详情参见(https://blog.csdn.net/weixin_41767802/article/details/114771881)
// readAsDataURL DataUrl 类型
// readAsBinaryString 二进制
// readAsText 转化为文本
fileChange (file) {
let that = this
let reader = new FileReader()
reader.readAsArrayBuffer(file.raw)
reader.onload = () => {
mammoth.convertToHtml({arrayBuffer: reader.result})
.then(function (val) {
that.uploadInnerHtml = val.value // The generated HTML
})
}
}
Tips:
出现标签包含
<h2> <p> <p><img> <p>( <p><strong> <ol><li> <ol><li><strong> <ol><li><img>