当前位置：首页 > article >正文

vue将页面导出成word

article 2025/4/2 12:54:18

方法一：使用 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>

查看全文

http://www.kler.cn/a/613227.html