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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<template>
<div class="global">
<!-- <div class="preview">
<a-button type="primary" @click="isShow = true">开始预览</a-button>
</div> -->
<div class="pdfContainer" v-if="isShow">
<div class="button">
<a-button type="primary" size="small" @click="prev()">上一页</a-button>
<a-button type="primary" size="small" style="margin-left: 5px;" @click="next()">下一页</a-button>
<a-button type="primary" size="small" style="margin-left: 5px;" @click="scaleD()">放大</a-button>
<a-button type="primary" size="small" style="margin-left: 5px;" @click="scaleX()">缩小</a-button>
<a-button type="primary" size="small" style="margin-left: 5px;" @click="clockwise()">顺时针</a-button>
<a-button type="primary" size="small" style="margin-left: 5px;" @click="antiClockwise()">逆时针</a-button>
<a-button type="primary" size="small" style="margin-left: 5px;" @click="FileDownload()" icon="download">下载</a-button>
</div>
<div class="pdf">
<pdf ref="pdf" :src="src" :page="currentPage" :rotate="pageRotate" @num-pages="pageCount = $event" @page-loaded="currentPage = $event" @loaded="loadPdfHandler"></pdf>
</div>
<div class="page">
<span class="pageNum">第{{ currentPage }}页</span>
<span class="pageNum">/</span>
<span class="pageNum">共{{ pageCount }}页</span>
</div>
</div>
</div>
</template>
<script>
import Pdf from 'vue-pdf'
import axios from 'axios'
//import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
export default {
name: 'pdfView',
data() {
return {
src: '', // pdf的路径 实际项目后端返回
currentPage: 0, // pdf文件页码
pageCount: 0, // pdf文件总页数
scale: 100, // 开始的时候默认和容器一样大即宽高都是100%
pageRotate: 0, // 旋转角度
isShow: true
};
},
props: {
value: {
type: String,
default() {
return null
},
},
fileName: {
type: String,
default() {
return null
}
}
},
components: { Pdf },
created() {
this.src = Pdf.createLoadingTask({ url: this.value, cMapUrl: 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/', cMapPacked: true })//this.value
},
mounted() {
//console.log(Pdf, "Pdf----->>>");
},
methods: {
//pdf加载时
loadPdfHandler(e) {
this.currentPage = 1; // 加载的时候先加载第一页
this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
this.$refs.pdf.$el.style.height = parseInt(this.scale) + "%";
},
//上一页
prev() {
if (this.currentPage > 1) {
this.currentPage--;
}
},
//下一页
next() {
if (this.currentPage < this.pageCount) {
this.currentPage++;
}
},
//放大
scaleD() {
if(this.scale == 100) return this.$message.warning('已经是最大喽~~')
this.scale += 10;
this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
this.$refs.pdf.$el.style.height = parseInt(this.scale) + "%";
},
//缩小
scaleX() {
if(this.scale == 40) return this.$message.warning('已经是最小喽~~')
this.scale += -10;
this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
this.$refs.pdf.$el.style.height = parseInt(this.scale) + "%";
},
//顺时针
clockwise() {
this.pageRotate += 90;
},
//逆时针
antiClockwise() {
this.pageRotate -= 90;
},
FileDownload() {
axios({
url: this.value, // 替换为实际文件的URL
method: 'GET',
responseType: 'blob' // 告诉axios返回的数据类型为Blob
}).then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]))
const link = document.createElement('a')
link.href = url
link.setAttribute('download', this.fileName) // 下载文件的名称
document.body.appendChild(link)
link.click()
})
}
},
};
</script>
<style scoped>
.global {
width: 100%;
height: 100%;
}
.preview {
width: 100%;
height: 50px;
}
.pdfContainer {
width: 100%;
height: calc(100% - 50px);
}
.pdfContainer .button {
width: 100%;
height: 50px;
display: flex;
align-items: center;
}
.pdfContainer .pdf {
width: 100%;
height: calc(100% - 100px);
overflow-y: auto;
}
.pdfContainer .page {
width: 100%;
height: 50px;
}
.pageNum {
font-size: 15px;
}
</style>