1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<template>
<div>
<el-button @click="downLoad">点击下载word文件</el-button>
<!-- <el-button @click="downLoadPdf">点击下载pdf文件</el-button> -->
<div class="docWrap">
<!-- 预览文件的地方（用于渲染） -->
<div ref="file"></div>
</div>
</div>
</template>
<script>
import { renderAsync } from 'docx-preview';
import Api from '~/service/Api';
import commonProcess from '~/mixin/commonProcess';
export default {
data() {
return {
model: { docXML: '' },
pdf: '',
};
},
mixins: [commonProcess],
mounted() {
this.goPreview ()
},
methods: {
async goPreview () {
let params = window.opener["params"];
let blob = params.blob
renderAsync(blob, this.$refs.file)
this.$nextTick(() => {
let dom = document.querySelector('.docWrap')
dom.style.height = '100vh'
dom.style.overflow = 'auto'
})
},
async downLoad () {
let params = window.opener["params"];
let blob = params.blob
let docnam = params.docnam
this.fileDownLoad(docnam,blob)
},
fileDownLoad(docnam,blob){
let a = document.createElement("a"); //创建一个<a></a>标签
a.href = URL.createObjectURL(blob); // 将流文件写入a标签的href属性值
a.download = docnam; //设置文件名
a.style.display = "none"; // 障眼法藏起来a标签
document.body.appendChild(a); // 将a标签追加到文档对象中
a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
a.remove(); // 一次性的，用完就删除a标签
},
async downLoadPdf () {
let params = window.opener["params"];
let docnam = params.docnam
let rtnmsg = await Api.post('/service/gitopn/download', this.wrapper(docnam));
if (rtnmsg.respCode == SUCCESS) {
let base64Str = rtnmsg.data.download;
let bstr = window.atob(base64Str); // 解码 base-64 编码的字符串，base-64 编码使用方法是 btoa()
let length = bstr.length;
let u8arr = new Uint8Array(length); // 创建初始化为0的，包含length个元素的无符号整型数组
while (length--) {
u8arr[length] = bstr.charCodeAt(length); // 返回在指定的位置的字符的 Unicode 编码
}
let blob = new Blob([u8arr]);
let index = docnam.lastIndexOf(".");
docnam = docnam.substring(0,index)+".pdf";
this.fileDownLoad(docnam,blob)
}
}
}
};
</script>
<style scoped></style>