华为云云速建站北京建设住房和城乡建设官网
方法一：使用 html-docx-js
html-docx-js 是一个轻量级的库，可以将 HTML 转换为 Word 文档。
- 安装依赖
首先安装 html-docx-js：
Bash深色版本
npm install html-docx-js --save
- 创建导出逻辑
在 Vue 组件中实现导出功能的代码如下：
Vue深色版本
<template><div><button @click="exportToWord">导出为Word</button><div id="content" ref="content"><h1>这是一个标题</h1><p>这是段落内容。</p ><ul><li>列表项 1</li><li>列表项 2</li></ul></div></div>
</template><script>
import { saveAs } from 'file-saver';
import htmlDocx from 'html-docx-js/dist/html-docx';export default {methods: {exportToWord() {// 获取 HTML 内容const content = this.$refs.content.innerHTML;// 将 HTML 转换为 Word 文档const converted = htmlDocx.asBlob(content);// 使用 file-saver 保存文件saveAs(converted, 'example.docx');}}
};
</script><style scoped>
/* 样式可以根据需要自定义 */
#content {font-family: Arial, sans-serif;
}
</style>