从网上找的方法,有两种方式,但只使用了一种,另外一种方式没有成功,就把可以成功使用的这个方法记录一下吧
技术: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
目前未能成功使用该方法