Vue2问题：如何在浏览器中导出word文档？4条解决方案！

最新推荐文章于 2024-05-25 11:31:53 发布

程序员大澈

最新推荐文章于 2024-05-25 11:31:53 发布

阅读量913

点赞数 1

分类专栏：功能问题合集文章标签：前端 javascript vue.js css html word

本文链接：https://blog.csdn.net/m0_74802419/article/details/133895956

版权

功能问题合集专栏收录该内容

53 篇文章 4 订阅

订阅专栏

笔者 | 大澈

大家好，我是大澈！

遇到难题，可以进问答群，问题直接群里扔，完事总有人会陪你一起搞。

建立这个平台的初衷：

1、打造一个问答平台，一个仅包含前端问题的平台，让大家可以高效处理同样问题。

2、通过不断积累问题，去练习大家的个人逻辑思维，并顺便学习相关的知识点。

3、遇到难题，遇到有共鸣的问题，一起讨论，一起沉淀，一起成长。

ONE

需求分析，问题描述

一、需求

点击导出word按钮，将页面任意指定区域的内容，导出为word文档。

二、问题

1、如何获取指定内容？

2、如何将HTML内容转换为Word文档？

3、如何导出下载Word文档？

TWO

解决问题，答案速览

实现代码如下，复制粘贴即可直接使用。

如果你有时间，具体问题梳理、代码分析、知识总结，可见第三部分。

一、使用说明

参考网上使用最多的方式，使用 FileSaver.js 和 html-docx-js 库（或其它将HTML内容转换为Word文档的库）来在Vue组件中导出内容为Word文档。

但是这种方式只能在服务端实现，在浏览器端使用会报错，这是因为浏览器的安全策略限制了对文件系统的直接访问，以防止恶意脚本滥用用户的文件系统。

为了避免报错，您可以考虑以下解决方案：

1、服务器端导出【推荐】：将生成Word文档的逻辑放在服务器端，通过Vue组件向服务器发送请求，服务器生成并返回Word文档的下载链接或文件。

2、使用其他导出方式：考虑使用其他导出方式，例如将内容转换为PDF格式或生成HTML格式的文件，以避免浏览器限制。

3、考虑使用专门的Word文档生成库【导出复杂Word】：如果您需要在浏览器中生成复杂的Word文档，可以考虑使用专门的JavaScript库，例如docxtemplater或mammoth.js，它们提供了更完整的Word文档生成功能。

4、考虑使用原生的方式实现【导出简单Word】。即我们下面要说的，利用a元素的原生文件下载功能来实现Word导出。

二、代码实例

1、在assets文件夹下新建js文件夹，然后在js文件夹下新建文件exportToWord.js，把下面代码放进去。

    // 导出Word
    export const exportToWord = (id, name) => {
        // 获取选中区域Html
        const dom = document.getElementById(id)
        const content = dom.innerHTML;
        const convertedContent = convertToWordDocument(content);

        // Html类型数据 转换为 文件类型数据
        const blob = new Blob([convertedContent], { type: 'application/msword' });

        // 下载Word文档
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = name+'.doc' || 'exported.doc';
        link.click();
    }

    //完善Html格式
    const convertToWordDocument = (content) => {
        const header = `<!DOCTYPE html><html><head><meta charset='utf-8'><title>Exported Document</title></head><body>`;
        const footer = `</body></html>`;

        return `${header}${content}${footer}`;
    }

2、在需要的组件中引入exportToWord函数，直接调用即可。函数接收两个参数，第一个是指定区域元素的id，第二个是导出Word文档的名称。

    <template>
      <div>
        <div id="word_demo">
          <h1>标题</h1>
          <p style="color: green">绿色字</p>
          <p style="color: red">红色字</p>
          <p style="color: dodgerblue">蓝色字</p>
        </div>
        <button @click="downLoad('word_demo', '哈哈哈')">点击导出word</button>
      </div>
    </template>

    <script>
    import { exportToWord } from '@/assets/js/exportToWord'

    export default {
      methods: {
        downLoad(id, name) {
          exportToWord(id, name)
        },
      }
    }
    </script>

THREE

问题解析，知识总结

一、如何获取指定内容？

这个比较简单，相信大家都会，这里简单提一下。

对于组件可以用ref，对于元素可以用id。

二、如何将HTML内容转换为Word文档？

通过new Blob对象，将Html类型数据转换为生成Word文档的二进制数据。

关于Blob对象：

1、简介：

Blob（Binary Large Object）是JavaScript中的一个接口，用于表示不可变的、原始数据的类似文件的对象。

它通常用于处理二进制数据，例如图像、音频、视频等。

Blob对象可以包含任意类型的数据，包括文本、数组缓冲区和其他Blob对象。