<template>
<j-modal
:title="title"
:width="width"
:visible="pdfVisible"
:fullscreen="true"
:okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
@cancel="handleCancel"
cancelText="关闭"
>
<template slot="footer">
<div>
<a-button @click="handleCancel">关闭</a-button>
</div>
</template>
<a-spin :spinning="spinning">
<div style="float:right">
<button @click.stop="clock">顺时针 </button>
<button style="margin-left:10px" @click.stop="counterClock">逆时针</button>
<button style="margin-left:10px" :class="{ select: idx == 0 }" @touchstart="idx = 0" @touchend="idx = -1" @click.stop="scaleD">放大</button>
<button style="margin-left:10px" :class="{ select: idx == 1 }" @touchstart="idx = 1" @touchend="idx = -1" @click.stop="scaleX" >缩小</button>
</div>
<div class="pdf">
ref="pdf"
v-if="pdfUrl != '' && pdfUrl != null"
:src="pdfUrl"
:page="currentPageView"
:rotate="pageRotate"
@num-pages="pageCount = $event"
@page-loaded="currentPageView = $event"
@loaded="loadPdfHandler"
@error="pdfError($event)"
style="display: inline-block; width: 90%"
>
</pdf>
<p v-if="pdfUrl != ''" class="arrow" style="text-align: center">
<span icon="el-icon-arrow-left" @click="changePdfPage(0)" class="turn" :class="{ grey: currentPageView == 1 }"
>上一页</span
>
{{ currentPageView }} / {{ pageCount }}
<span
icon="el-icon-arrow-right"
@click="changePdfPage(1)"
class="turn"
:class="{ grey: currentPageView == pageCount }"
>下一页</span
>
</p>
</div>
</a-spin>
</j-modal>
</template>
<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { pdfMixin } from '@/mixins/pdfMixin'
import pdf from 'vue-pdf'
export default {
name: 'PdfPreview',
mixins: [pdfMixin],
components: { pdf },
data() {
return {
title: 'PDF预览页面',
width: 800,
disableSubmit: false,
pdfurl: '',
pdfVisible: false,
headers: {},
scale: 100,
idx: -1,
pageRotate:0,
}
},
created() {
const token = Vue.ls.get(ACCESS_TOKEN)
this.headers = { 'X-Access-Token': token }
},
computed: {},
mounted() {},
methods: {
pdfError(error){
this.$message.error('PDF加载失败,请重试')
console.error(error)
},
//顺时针
clock(){
this.pageRotate += 90
},
//逆时针
counterClock(){
this.pageRotate -= 90
},
//放大
scaleD() {
this.scale += 5
this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'
},
//缩小
scaleX() {
if (this.scale == 100) {
return
}
this.scale += -5
this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'
},
previewFiles(url) {
this.pdfVisible = true
this.spinning = true
this.pdfurl = url
this.showPdf(url)
},
handleCancel() {
this.close()
},
close() {
this.$emit('close')
this.pdfVisible = false
},
},
}
</script>
<style scoped>
.turn {
cursor: pointer;
}
</style>
import pdf from "vue-pdf";
export const pdfMixin = {
components: {
},
data() {
return {
pdfUrl: null,
currentPageView: 0, // pdf文件页码
pageCount: 0, // pdf文件总页数
fileType: "pdf", // 文件类型
token: '',
spinning:false,
}
},
methods: {
//展示pdf模板
showPdf(pUrl) {
//var loadingTask = pdf.createLoadingTask('https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-28/1546003237411.pdf', {withCredentials: false});
this.currentPageView = 1;
this.pdfUrl = pdf.createLoadingTask({
url: pUrl,
cMapUrl: "https://unpkg.com/pdfjs-dist@2.0.943/cmaps/",
cMapPacked: true,
});
},
//模板分页
changePdfPage(val) {
if (val === 0 && this.currentPageView > 1) {
this.currentPageView--;
}
if (val === 1 && this.currentPageView < this.pageCount) {
this.currentPageView++;
}
},
// pdf加载时
loadPdfHandler(e) {
this.currentPageView = 1; // 加载的时候先加载第一页
this.spinning = false
},
}
}