【JavaScript】关于使用JS对word文档实现预览的一些思考

mammoth

官网地址：https://github.com/mwilliamson/mammoth.js#readme

安装mammoth：

npm i mammoth -S

我们可以安装mammoth来实现上传的word文件的在线预览，我们以element的上传组件为示例：

<template><div><el-upload class="upload-demo" drag action="#" :auto-upload="false" :on-change="changeFile"><el-icon class="el-icon--upload"><upload-filled /></el-icon><div class="el-upload__text">Drop file here or <em>click to upload</em></div><template #tip><div class="el-upload__tip">jpg/png files with a size less than 500kb</div></template></el-upload><div v-html="wordcontent"></div></div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { UploadProps } from 'element-plus'
import mammoth from 'mammoth'const wordcontent = ref('')const changeFile: UploadProps['onChange'] = (uploadFile, uploadFiles) => {const file = uploadFile.rawconst myReader = new FileReader()myReader.readAsArrayBuffer(file as Blob)myReader.addEventListener('loadend', function (e) {const buffer = e?.target?.result // arraybuffer objectmammoth.convertToHtml({arrayBuffer: buffer}).then(function (result: { value: string; messages: any[] }) {const html = result.value // The generated HTMLconst messages = result.messages // Any mesarnings during conversionwordcontent.value = html}).done()})
}
</script>

详细的API参考官网地址。

docx4js

官网地址：https://github.com/lalalic/docx4js

使用docx4js实现获取docx文件有多少页码。

安装docx4js：

npm i docx4js -S

我们新建一个docx.mjs,代码如下：

import docx4js from 'docx4js'
import { TextDecoder } from 'util'docx4js.docx.load('./test2.docx').then((doc) => {const propsAppRaw = doc.parts['docProps/app.xml']._data.getContent()const propsApp = new TextDecoder('utf-8').decode(propsAppRaw)console.log(propsApp)const match = propsApp.match(/<Pages>(\d+)<\/Pages>/)if (match && match[1]) {const count = Number(match[1])console.log(count)}
})

执行命令： node docx.mjs

可以在控制台看到打印结果,第一个打印：

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Properties xmlns="http://schemas.openxmlformats.org/officeDocument/2006/extended-properties" xmlns:vt="http://schemas.openxmlformats.org/officeDocument/2006/docPropsVTypes"><Template>Normal.dotm</Template><Pages>4</Pages><Words>996</Words><Characters>1013</Characters><Lines>0</Lines><Paragraphs>0</Paragraphs><TotalTime>0</TotalTime><ScaleCrop>false</ScaleCrop><LinksUpToDate>false</LinksUpToDate><CharactersWithSpaces>1250</CharactersWithSpaces><Application>WPS Office_12.1.0.18543_F1E327BC-269C-435d-A152-05C5408002CA</Application><DocSecurity>0</DocSecurity></Properties>

第二个打印：

4

其中的4表示这个word文档是4页。

但是有时候，有的word文档解析的结果是不一样的，如下：

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<ap:Properties xmlns:vt="http://schemas.openxmlformats.org/officeDocument/2006/docPropsVTypes" xmlns:ap="http://schemas.openxmlformats.org/officeDocument/2006/extended-properties"/>

该文件中就没有包含Pages的字段。

所以综上所示，如果通过docx4js获取word文件的页码数量是不准确的，并且需要在node环境中运行，且文件是docx格式的，doc格式的不支持。