插件推荐 | html文本转docx文档

最近在项目中遇到一个需求，需要转化html文本为docx文档。

之前在网上有人推荐使用html-docx-js。但是这个包的last publish是在4年前，用的语言是CoffeeScript，而且构建出来的代码包括with语句，所以在主流的现代框架中（vue/react/angular）中使用不了（它们目前的构建工具都默认启用了严格模式），我看了下Issue，发现很多都在抱怨这个包目前用不了，所以萌生了用typescript重写的想法。

目前，大家可以通过npm install html-docx-js-typescript --save-dev来安装这个html-docx-js-typescript包，使用的方法也很简单。

import { asBlob } from 'html-docx-js-typescript'
// 要保存这个docx文件推荐引入file-saver哦，你可以用npm i -D file-saver来安装
import { saveAs } from 'file-saver'
 
const htmlString = `


  
  


  
Welcome

`
 
export default {
  methods: {
    saveDocx() {
      const fileData = asBlob(htmlString).then(data => {
        saveAs(fileData, 'file.docx') // 保存为docx文件
      }) // asBlob() 返回 Promise，用promise.then还是async语法都行
    },
  },
}

也可以添加导出的选项，包括边距，页面的横竖之类的。

// landscape就是横着的，portrait是竖着的，默认是竖屏portrait。
const data = await asBlob(htmlString, { orientation: 'landscape', margins: { top: 100 } })

在node平台你可以用fs模块直接把数据写入文件。

如果你把这个包用于typescript环境，当你要给导出选项暂存在一个独立的Object里，再填到参数那里的话，typescript可能会抛出类型错误。

import { asBlob } from 'html-docx-js-typescript'
const opt = {
  margin: {
    top: 100
  },
  orientation: 'landscape' // type error: because typescript automatically widen this type to 'string' but not 'Orient' - 'string literal type'
}
await asBlob(html, opt)

这是一个typescript存在的问题，可以查看github typescript仓库的issue：Syntax for hinting literal type inference #10195。

要解决它很简单，只需要给它一个类型断言就行了。

const opt = {
  margin: {
    top: 100
  },
  orientation: 'landscape' as const 
}

最后，如果大家觉得我那里写得不好需要改进，欢迎提issue或者pull requests，这是项目的github地址：https://github.com/caiyexiang/html-docx-js-typescript

一起讨论，一起进步哈！