前端关于 Word 的需求前端关于 Word 的需求，一般分几种情况：已经有了 Word 文件，只是在页面上做个展示

前端关于 Word 的需求，一般分几种情况：

已经有了 Word 文件，只是在页面上做个展示

通过 docx-preview 实现
通过 mammoth 实现

没有 Word 文件，需要前端动态生成 Word 文件

这里也分两种形式：

一种是：通过一个模板 Word 文件，通过填入模板中的变量，生成 Word 文件

通过 docxtemplater + pizzip 实现

另一种是：直接通过某个页面转换成 Word 文件

通过 html-docx-js 实现

docx-preview

npm install docx-preview

import { renderAsync } from 'docx-preview';
import docx from './xgq.docx';

<div id="preview"></div>

const docxData = await fetch(docx); // 这里展示的情况是word文件在本地
const arrayBuffer = await docxData.arrayBuffer();
renderAsync(arrayBuffer, document.getElementById('preview') as any, undefined, {
  inWrapper: false,
  ignoreWidth: true,
});

mammoth

npm install mammoth

import mammoth from 'mammoth';
import docx from './xgq.docx';

<div id="preview"></div>

const docxData = await fetch(docx); // 这里展示的情况是word文件在本地
const arrayBuffer = await docxData.arrayBuffer();
const html = await mammoth.convertToHtml({ arrayBuffer });
document.getElementById('preview').innerHTML = html.value;

docxtemplater + pizzip

npm install docxtemplater pizzip

首先需要一个 docx 文件作为模板：xgq.docx

{}语法代表变量

import docxtemplater from 'docxtemplater';
import pizzip from 'pizzip'; // 必须
import docx from './xgq.docx';
import { saveAs } from 'file-saver';

const docxData = await fetch(docx); // 这里展示的情况是word文件在本地
const arrayBuffer = await docxData.arrayBuffer();
const zip = new pizzip(arrayBuffer); // 必须用pizzip生成zip
const doc = new docxtemplater(zip, {
  paragraphLoop: true,
  linebreaks: true,
});
doc.render({
  name: 'xgq',
});
const blob = doc.getZip().generate({
  type: 'blob',
  mimeType:
    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
});
saveAs(blob, 'download.docx');

代码示例

html-docx-js

npm install html-docx-js

import * as htmlDocx from 'html-docx-js/dist/html-docx';

const html = `
<html>
<body>内容</body>
</html>
`;
const converted = await htmlDocx.asBlob(html, {
  orientation: 'portrait',
  margins: {
    top: 500,
    left: 500,
    right: 500,
    bottom: 500,
  },
});
saveAs(converted, 'download.docx');

不支持严格模式

比如你在 vite 中使用html-docx-js ::: danger 报错 with(obj){}... :::

主要是因为这个 js 库太老了，写法不支持严格模式，所以需要修改源码，将with用法替换掉。

可以直接看下方的代码示例，里面的html-docx-js是修改过源码后的。

代码示例