vue将页面导出成word

方法一:使用 html-docx-js

html-docx-js 是一个轻量级的库,可以将 HTML 转换为 Word 文档。

  1. 安装依赖
    首先安装 html-docx-js:
    Bash深色版本

    npm install html-docx-js --save

  2. 创建导出逻辑
    在 Vue 组件中实现导出功能的代码如下:
    Vue深色版本

    <template>
    <button @click="exportToWord">导出为Word</button>

    这是一个标题

    这是段落内容。

    • 列表项 1
    • 列表项 2
    </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>
相关推荐
小螺号dididi吹25 分钟前
菜鸟速通:React入门 01
前端·react.js·前端框架
Lstmxx35 分钟前
解放前端生产力:我如何用 LLM 和 Bun.js 构建一个 YApi to TypeScript 的自动化代码生成服务
前端·ai编程·mcp
持续前行39 分钟前
vue3 : 导出pdf , 除iframe之外 ,还有其他内容一并导出方式
前端·javascript·vue.js
唐某人丶44 分钟前
前端仔如何在公司搭建 AI Review 系统
前端·人工智能·aigc
RainbowSea1 小时前
伙伴匹配系统(移动端 H5 网站(APP 风格)基于Spring Boot 后端 + Vue3 - 02
java·vue.js·spring boot
没有鸡汤吃不下饭1 小时前
排查vue项目线上才会出现的故障
前端·vue.js·nginx
吃饭睡觉打豆豆嘛1 小时前
React Router 传参三板斧:新手也能 5 秒做决定
前端
裘乡1 小时前
storybook配合vite + react生成组件文档
前端·react.js
Carolinemy1 小时前
ElementUI 之 el-table
前端·vue.js
裘乡1 小时前
vonage音视频基本使用--web@opentok/client
前端·音视频开发