Vue3——html-doc-js(html导出为word的js库)

html-doc-js 是一个可以将 HTML 内容导出为 Word 文档的 JavaScript 库。在 Vue 3 中使用时，你需要先安装这个库，然后在你的 Vue 组件中引入并使用它。

首先，通过 npm 安装 html-doc-js 库：

npm install html-doc-js

然后，在你的 Vue 组件中使用：

<template>
  <div>
    <button @click="exportToWord">导出为 Word</button>
  </div>
</template>
 
<script>
import { saveAs } from 'file-saver';
import html2docx from 'html-docx-js/dist/html2docx';
 
export default {
  methods: {
    exportToWord() {
      const contentHTML = document.querySelector('#content').innerHTML; // 获取需要导出的 HTML 内容
      const converted = html2docx(contentHTML); // 将 HTML 转换为 docx 格式的字符串
      const blob = new Blob([converted], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
      saveAs(blob, 'exported-document.docx'); // 使用 file-saver 保存文件
    },
  },
};
</script>

在上面的代码中，我们首先从 file-saver 导入 saveAs 函数，用于保存生成的 Word 文档。然后从 html-doc-js 导入 html2docx 函数，它将 HTML 内容转换为 docx 格式的字符串。通过按钮点击事件触发 exportToWord 方法，将指定 HTML 内容转换并保存为 Word 文档。

确保你的 HTML 元素（例如一个带有 id="content" 的 div）包含了你想要导出的内容。这个例子假设你有一个元素 <div id="content">...</div> 包含着你想要转换的 HTML 内容。