Vue中html导出docx文件
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Vue中html导出docx⽂件
⽅法⼀、技术实现：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>
说明：fileSaver⽤法
1 ⼀、安装
2 # Basic Node.JS installation
3 npm install file-saver --save
4 bower install file-saver
5 此外，可以通过以下⽅式安装TypeScript定义：
6
7 # Additional typescript definitions
8 npm install @types/file-saver --save-dev
9 ⼆、语法
10 saveAs()从⽂件保存器导⼊
11 import { saveAs } from 'file-saver';
12 FileSaver saveAs(Blob/File/Url, optional DOMString filename, optional Object { autoBom })
13 传递{ autoBom: true }如果你想FileSaver.js⾃动提供Unicode⽂本编码提⽰（：见字节顺序标记）。
请注意，只有在您的Blob类型已charset=utf-8设置的情况下才能执⾏此操作。
14
15
16
17 三、例⼦
18 使⽤保存⽂字 require()
19 var FileSaver = require('file-saver');
20 var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
21 FileSaver.saveAs(blob, "hello world.txt");
22 储存⽂字
23 var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
24 FileSaver.saveAs(blob, "hello world.txt");
25 保存⽹址
26 FileSaver.saveAs("https:///image", "image.jpg");
27 在相同来源内使⽤URL只会使⽤a[download]。
否则，它将⾸先检查它是否⽀持带有同步头请求的cors标头。
如果是这样，它将下载数据并使⽤Blob URL保存。
如果没有，它将尝试使⽤下载它a[download]。
28
29 标准的W3C File API Blob接⼝并⾮在所有浏览器中都可⽤。
Blob.js是Blob解决此问题的跨浏览器实现。
30
31 保存画布
32 var canvas = document.getElementById("my-canvas");
33 canvas.toBlob(function(blob) {
34 saveAs(blob, "pretty image.png");
35 });
36 注意：标准HTML5 canvas.toBlob()⽅法并⾮在所有浏览器中都可⽤。
canvas-toBlob.js是⼀个跨浏览器canvas.toBlob()，可以对此进⾏填充。
37
38 保存⽂件
39 您可以保存File构造函数⽽⽆需指定⽂件名。
如果⽂件本⾝已经包含名称，则有很多⽅法可以获取⽂件实例（从存储，⽂件输⼊，新构造函数，剪贴板事件）。
如果仍要更改名称，则可以在第⼆个参数中更改它。
40
41 // Note: Ie and Edge don't support the new File constructor,
42 // so it's better to construct blobs and use saveAs(blob, filename)
43 var file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"});
44 FileSaver.saveAs(file);
45
46 四、具体使⽤
47 下⾯是项⽬中使⽤file-saver封装⼏种常见格式的导出，这⾥后台主要输出⽂件流形式，如下：
48
49
50
51 在⽂件exportFile.js中封装⽅法：
52
53 import FileSaver from "file-saver";
54 export default class fileSave {
55 /**
56 * 导出Excel⽂件
57 * @param {*} res ⽂件流
58 * @param {*} name ⽂件名
59 */
60 static getExcel(res, name) {
61 let blob = new Blob([res], {
62 type: "application/vnd.ms-excel"
63 });
64 FileSaver.saveAs(blob, name + ".xlsx");
65 }
66
67 /**
68 * 导出CSV⽂件
69 * @param {*} res ⽂件流
70 * @param {*} name ⽂件名
71 */
72 static getCsv(res, name) {
73 let blob = new Blob([res], {
74 type: "application/vnd.ms-excel"
75 });
76 FileSaver.saveAs(blob, name + ".csv");
77 }
78
79 /**
80 * 导出图⽚1
81 * @param {*} url 图⽚地址
82 * @param {*} name ⽂件名
83 */
84 static getImgURLs(url, name) {
85 let last = url.substring(stIndexOf("."), url.length);
86 FileSaver.saveAs(url, `${name}${last}`);
87 }
88 /**
89 * 导出图⽚2
90 * @param {*} res ⽂件流
91 * @param {*} name ⽂件名
92 */
93 static downLoadImg(res, filename) {
94 let blob = new Blob([res], {
95 type: "image/jpeg"
96 });
97 FileSaver.saveAs(blob, `${filename}.jpg`);
98 }
99 }
100 使⽤：
101
102 1.导⼊
103
104 import exportFile from '@/utils/exportFile'
105 2.使⽤
106
107 exportFile.getExcel(res.data, '近年⾛势')
⽅法⼆：jQuery中的插件jquery.wordexport.js+fileSaver.js <div class="word">
<h1>我们的梦想来⾃内⼼深处的孤独</h1>>
<p align="center" style="font-size:20pt;font-weight:bold;">JS导出Word⽂档</p>
<div>我们来⾃同⼀个世界</div>
</div>
<input type="button" value="导出word">
<script src="https:///jquery/2.2.4/jquery.js"></script>
<script type="text/javascript" src="FileSaver.js"></script>
<script type="text/javascript" src="jquery.wordexport.js"></script>
<script>
$(function () {
$("input[type='button']").click(function (event) {
$(".word").wordExport('word⽂档');
});
})
</script>
说明：在Vue中使⽤
1.在index.html全局引⼊jQuery
2.cmd安装FileSaver.js
npm install file-saver --save
在需要的组件中引⼊file-saver
3.在需要的组件中引⼊
4.使⽤
.wordExport("⽣成⽂档")；这个是⽣成⽂档的⽂件名。