在
Vue2 项目中实现
生成包含图片的
Word 文档功能，可以通过以下方法和库来完成。以下是详细说明：
### 方法一：使用 `
html-docx-js` 和 `file
-saver`
这种方法通过将
DOM 元素的内容转换为
Word 文档并支持图片嵌入[^
3]。
#### 实现步骤
1. **安装依赖**
需要安装 `
html-docx-js` 和 `file
-saver` 库。
```bash
npm install
html-docx-js file
-saver
```
2. **代码示例**
下面是一个完整的代码示例，展示如何将包含图片的
DOM 元素内容导出为
Word 文档。
```javascript
import FileSaver from "file
-saver";
import
htmlDocx from "
html-docx-js/dist/
html-docx";
export default {
methods: {
exportTo
Word() {
// 获取需要导出的
DOM 元素内容
let content
Html = document.getElementById
("
domId"
).inner
HTML;
// 构建
HTML 字符串，确保图片宽高生效
let content = `
<!DOCTYPE
html>
<
html>
<head>
<meta http
-equiv="Content
-Type" content="text/
html; charset=UTF
-8">
</head>
<body>
<div>${content
Html}</div>
</body>
</
html>
`;
// 替换图片标签以设置固定宽高
content = content.replaceAll
(&#
39;<img&#
39;, &#
39;<img width="600" height="400" &#
39;
);
// 转换为
Word 文档格式
let converted =
htmlDocx.asBlob
(content
);
// 保存文件
FileSaver.saveAs
(converted, "测试.
docx"
);
}
}
};
```
3. **注意事项**
- 确保
DOM 元素中的图片路径是正确的，可以是相对路径或绝对路径。
- 如果图片不显示，可能是因为图片路径无法被正确解析，建议使用 Base64 格式的图片[^
3]。
---
### 方法二：使用 `wangeditor` 插件
如果项目中已经集成了 `wangeditor` 编辑器，可以直接利用其强大的
文档处理能力[^1]。
#### 实现步骤
1. **初始化编辑器**
在
Vue2 项目中引入并初始化 `wangeditor`。
```javascript
import E from &#
39;wangeditor&#
39;;
export default {
mounted
() {
const editor = new E
(&#
39;#editor&#
39;
);
editor.create
();
}
};
```
2. **
生成 Word 文档**
使用 `wangeditor` 的内容导出功能，并结合 `
html-docx-js` 将内容转换为
Word 文档。
```javascript
methods: {
generate
WordFromEditor
() {
const editor = this.$refs.editor;
const content
Html = editor.txt.
html(); // 获取编辑器内容
let content = `
<!DOCTYPE
html>
<
html>
<head>
<meta http
-equiv="Content
-Type" content="text/
html; charset=UTF
-8">
</head>
<body>
<div>${content
Html}</div>
</body>
</
html>
`;
// 替换图片标签以设置固定宽高
content = content.replaceAll
(&#
39;<img&#
39;, &#
39;<img width="600" height="400" &#
39;
);
// 转换为
Word 文档格式
let converted =
htmlDocx.asBlob
(content
);
// 保存文件
FileSaver.saveAs
(converted, "测试.
docx"
);
}
}
```
---
### 方法三：使用 `
docxtemplater` 和模板
如果需要更复杂的
Word 文档生成（如动态数据填充），可以使用 `
docxtemplater`[^4]。
#### 实现步骤
1. **安装依赖**
```bash
npm install
docxtemplater pizzip
```
2. **代码示例**
```javascript
import
Docxtemplater from "
docxtemplater";
import PizZip from "pizzip";
import FileSaver from "file
-saver";
export default {
methods: {
generateComplex
Word() {
const zip = new PizZip
(this.getTemplateFile
()); // 加载模板文件
const doc = new
Docxtemplater
(zip, { paragraphLoop: true, linebreaks: true }
);
// 动态数据
const data = {
title: "示例
文档",
date: "
20
24
-09
-23",
image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI1
2P4//8/w
38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" // Base64 图片
};
// 设置数据
doc.setData
(data
);
try {
// 渲染模板
doc.render
();
} catch
(error
) {
console.error
(error
);
}
//
生成文件
const out = doc.getZip
().generate
({
type: "blob",
mimeType:
"application/vnd.openxmlformats
-officedocument.
wordprocessingml.document"
}
);
// 保存文件
FileSaver.saveAs
(out, "复杂
文档.
docx"
);
},
getTemplateFile
() {
// 返回模板文件的 Blob 数据
return fetch
("/template.
docx"
).then
((res
) => res.arrayBuffer
());
}
}
};
```
---
### 总结
- 如果只需要简单的
DOM 内容导出，推荐使用 `
html-docx-js` 和 `file
-saver`[^
3]。
- 如果项目中已集成 `wangeditor`，可直接复用其功能。
- 如果需要复杂的动态数据填充，推荐使用 `
docxtemplater`[^4]。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
