前端玩Word：Word文档解析成浏览器认识的HTML

本文介绍: Word是微软公司开发的一个文字处理器应用程序，它是Office软件中的一个组件。使用Microsoft Office Word可创建和编辑信件、报告、网页或电子邮件中的文本和图形。相比于写字板和记事本功能更强大，性能更全面，可以插入图片、多媒体、艺术效果等。

领导跟富文本编辑器杠上啦，领导有一个类似于某雀导入Word文档，解析内容后渲染到编辑器编辑的需求。某雀功能效果如下：

怎么搞定呢？自己写一个解析器？

本文分享Word文件转换成浏览器认识的HTML实战经验。

Word是微软公司开发的一个文字处理器应用程序，它是Office软件中的一个组件。使用Microsoft Office Word可创建和编辑信件、报告、网页或电子邮件中的文本和图形。相比于写字板和记事本功能更强大，性能更全面，可以插入图片、多媒体、艺术效果等

列举一下Word常用的几种文件模式：

位于word下的document.xml文件docx的主文件。可以说，文档中你能看到的所有内容，在这里都有直接或者间接的记录。

document.xml内容都被XML标签进行了包裹，把XML标签转化成HTML标签即达成Word转HTML的目的。

const mammoth = require("mammoth");

mammoth.convertToHtml({path: "path/to/document.docx"})
    .then(function(result){
        const html = result.value; // 转换的HTML
        const messages = result.messages; 
    })
    .catch(function(error) {
        console.error(error);
    });

这是在Node.js环境中的案例，浏览器环境是无法通过{path: "path/to/document.docx"}来读取到docx文件。

如果是要在浏览器环境中执行它，需要docx文件转化为arrayBuffer数组再作为参数传递给convertToHtml：

const  updateWord = {
	handleFileSelect(event) {
			const self = this
			this.readFileInputEventAsArrayBuffer(event, function (arrayBuffer) {
			    mammoth.convertToHtml({ arrayBuffer: arrayBuffer }, {
							//...
					})
			}
  },
	//文件转化成arrayBuffer数据类型
	readFileInputEventAsArrayBuffer(event, callback) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = function (loadEvent) {
          const arrayBuffer = loadEvent.target.result;
          callback(arrayBuffer);
      };
      reader.readAsArrayBuffer(file);
  }
}

//获取文件file后，传递给handleFileSelect函数
updateWord.handleFileSelect(file)

const  updateWord = {
 //base64格式转blob
	base64ToBlob(base64, mimeType) {
        let bytes = window.atob(base64);
        let ab = new ArrayBuffer(bytes.length);
        let ia = new Uint8Array(ab);
        for (let i = 0; i < bytes.length; i++) {
            ia[i] = bytes.charCodeAt(i);
        }
        return new Blob([ia], { type: mimeType });
  },

	handleFileSelect(event,{success, fail}) {
			const self = this
			this.readFileInputEventAsArrayBuffer(event, function (arrayBuffer) {
			   mammoth.convertToHtml({ arrayBuffer: arrayBuffer }, {
                //处理图片
                convertImage: mammoth.images.imgElement(function (image) {
                    return image.read("base64").then(async (imageBuffer) => {
                        //base64转blob
                        const blob = self.base64ToBlob(imageBuffer, 'image/png')
                        blob.name = Date.now() + '.png'
                        const result = await new Promise((resolve, reject) => {
	                            //图片上传逻辑，可以自定义
															upImage({ file: blob }, {
                                resolve,
                                reject
                            })
                        })
                        const url = result.default
                        return {
                            src: url
                        }
                    });
                })
            }).then(success, fail);
			}
  },
//...
}

upImage是上传图片到我们自己服务器的逻辑，这个逻辑大家自定义发挥，只要最后把图片链接返回return {src: url},它会把base64替换掉。