插件推荐 | 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 = `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1>Welcome</h1>
</body>
</html>`
 
export default {
  methods: {
    saveDocx() {
      const fileData = asBlob(htmlString).then(data => {
        saveAs(fileData, 'file.docx') // 保存为docx文件
      }) // asBlob() 返回 Promise<Blob|Buffer>,用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

一起讨论,一起进步哈!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容