从网上找的方法，有两种方式，但只使用了一种，另外一种方式没有成功，就把可以成功使用的这个方法记录一下吧

技术：fileSaver.js+html-docx-js

1、npm安装

npm install --save html-docx-js
npm install --save file-saver

2、引入

import htmlDocx from 'html-docx-js/dist/html-docx';
import saveAs from 'file-saver';

3、导出word

<template>
  <div class="about">
    <button @click="this.exportClick">an</button>
  </div>
</template>

<script>
import htmlDocx from 'html-docx-js/dist/html-docx';
import saveAs from 'file-saver';
export default {
  methods: {
    exportClick() {
      var content = ` <h1>This is an about page</h1>
      <h2>This is an about page</h2>`
      var page = '<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body>' + content + '</body></html>'
      var converted = htmlDocx.asBlob(page);
      // 用 FielSaver.js里的保存方法 进行输出
      saveAs(converted, 'test.docx');
    }
  }
}
</script>

注意：该方法是使用拼接的字符串方式导出的，如果想要导出echart图形的话，可以先获取echart的图片，然后拼接img标签即可，插入的图片必须转为base64的格式才行

说明：fileSaver用法

一、安装
# Basic Node.JS installation
npm install file-saver --save
bower install file-saver
此外，可以通过以下方式安装TypeScript定义：

# Additional typescript definitions
npm install @types/file-saver --save-dev
二、语法
saveAs()从文件保存器导入
import { saveAs } from 'file-saver';
FileSaver saveAs(Blob/File/Url, optional DOMString filename, optional Object { autoBom })
传递{ autoBom: true }如果你想FileSaver.js自动提供Unicode文本编码提示（：见字节顺序标记）。请注意，只有在您的Blob类型已charset=utf-8设置的情况下才能执行此操作。



三、例子
使用保存文字 require()
var FileSaver = require('file-saver');
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");
储存文字
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");
保存网址
FileSaver.saveAs("https://httpbin.org/image", "image.jpg");
在相同来源内使用URL只会使用a[download]。否则，它将首先检查它是否支持带有同步头请求的cors标头。如果是这样，它将下载数据并使用Blob URL保存。如果没有，它将尝试使用下载它a[download]。

标准的W3C File API Blob接口并非在所有浏览器中都可用。 Blob.js是Blob解决此问题的跨浏览器实现。

保存画布
var canvas = document.getElementById("my-canvas");
canvas.toBlob(function(blob) {
    saveAs(blob, "pretty image.png");
});
注意：标准HTML5 canvas.toBlob()方法并非在所有浏览器中都可用。 canvas-toBlob.js是一个跨浏览器canvas.toBlob()，可以对此进行填充。

保存文件
您可以保存File构造函数而无需指定文件名。如果文件本身已经包含名称，则有很多方法可以获取文件实例（从存储，文件输入，新构造函数，剪贴板事件）。如果仍要更改名称，则可以在第二个参数中更改它。

// Note: Ie and Edge don't support the new File constructor,
// so it's better to construct blobs and use saveAs(blob, filename)
var file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(file);

四、具体使用
下面是项目中使用file-saver封装几种常见格式的导出，这里后台主要输出文件流形式，如下：



在文件exportFile.js中封装方法：

import FileSaver from "file-saver";
export default class fileSave {
    /**
     * 导出Excel文件
     * @param {*} res   文件流
     * @param {*} name  文件名
     */
    static getExcel(res, name) {
        let blob = new Blob([res], {
            type: "application/vnd.ms-excel"
        });
        FileSaver.saveAs(blob, name + ".xlsx");
    }

    /**
     * 导出CSV文件
     * @param {*} res   文件流
     * @param {*} name  文件名
     */
    static getCsv(res, name) {
        let blob = new Blob([res], {
            type: "application/vnd.ms-excel"
        });
        FileSaver.saveAs(blob, name + ".csv");
    }

    /**
     * 导出图片1
     * @param {*} url 图片地址
     * @param {*} name  文件名
     */
    static getImgURLs(url, name) {
        let last = url.substring(url.lastIndexOf("."), url.length);
        FileSaver.saveAs(url, `${name}${last}`);
    }
     /**
     * 导出图片2
     * @param {*} res 文件流
     * @param {*} name  文件名
     */
    static downLoadImg(res, filename) {
        let blob = new Blob([res], {
            type: "image/jpeg"
        });
        FileSaver.saveAs(blob, `${filename}.jpg`);
    }
}
使用：

1.导入

import exportFile from '@/utils/exportFile'
2.使用

exportFile.getExcel(res.data, '近年走势')

另外一种方法是：jQuery中的插件jquery.wordexport.js+fileSaver.js
目前未能成功使用该方法

参考地址：https://www.cnblogs.com/younghxp/p/14918734.html

# vue.js # html # javascript
GitHub 加速计划 / vu / vue
101
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：1 个月前 )
9e887079 [skip ci] 11 个月前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

cover

仓颉共学创作营正式启动！邀您共探新兴技术，解锁仓颉创作红利

avatar GitCode 开源社区

SCI论文快速写作指南：沁言学术实用方法

在SCI论文写作领域，尤其针对CSDN社区内的计算机科学、AI和算法优化研究者，高效方法的应用已成为提升投稿成功率的关键。AI工具的整合能显著优化从检索到润色的流程。本文基于公开调研数据和用户案例，剖析SCI写作难点，并以沁言学术为例，探讨实用方法与技术机制。重点在于算法深度与效率insights，旨在为CSDN用户提供可操作的指导，帮助科研人员加速SCI论文产出。

avatar GitCode 开源社区

高校科研团队文献协作工具推荐

在高校科研团队中，尤其针对CSDN社区内的计算机科学、AI和大数据领域，文献协作是推动项目进展的核心。传统方法往往因信息孤岛和版本冲突而低效，AI工具的引入能优化这一流程。本文基于公开调研数据和用户案例，剖析协作痛点，并以沁言学术为例，探讨其功能机制与应用策略。重点在于技术深度与团队insights，旨在为CSDN用户提供可借鉴的路径，帮助科研团队提升文献协作效率。

avatar GitCode 开源社区