Let’s first see if it’s what you want
yarn add vue-pdf
Then write a component
AppPdf.vue
<template>
<div class="pdf">
<div class="main">
<el-row :gutter="24" style="text-align:center" v-show="pdfSrc">
<el-button class="btn-def btn-pre" @click.stop="clock">clockwise</el-button>
<el-button class="btn-def btn-next" @click.stop="counterClock">counterclockwise</el-button>
<el-button class="btn-def btn-pre" @click.stop="prePage" :disabled="preDisable">The previous page</el-button>
<el-button class="btn-def btn-next" @click.stop="nextPage" :disabled="nextDisable">The next page</el-button>
<el-button :class="{select:idx==0}" @touchstart="idx=0" @touchend="idx=-1" @click="scaleD">amplification</el-button>
<el-button :class="{select:idx==1}" @touchstart="idx=1" @touchend="idx=-1" @click="scaleX">narrow</el-button>
<el-button @click="FileDownload (pdfUrl, 'PDF file')">download</el-button>
<div>{{ pageNum }}/{{ pageTotalNum }}</div>
</el-row>
<pdf
ref="pdf"
:src="pdfSrc"
:page="pageNum"
:rotate="pageRotate"
@password="password"
@progress="loadedRatio = $event"
@page-loaded="pageLoaded($event)"
@num-pages="pageTotalNum=$event"
@error="pdfError($event)"
@link-clicked="page = $event">
</pdf>
</div>
<el-row :gutter="24" style="text-align:center" v-show="pdfSrc">
<div>{{ pageNum }}/{{ pageTotalNum }}</div>
<el-button class="btn-def btn-pre" @click.stop="clock">clockwise</el-button>
<el-button class="btn-def btn-next" @click.stop="counterClock">counterclockwise</el-button>
<el-button class="btn-def btn-pre" @click.stop="prePage" :disabled="preDisable">The previous page</el-button>
<el-button class="btn-def btn-next" @click.stop="nextPage" :disabled="nextDisable">The next page</el-button>
<el-button :class="{select:idx==0}" @touchstart="idx=0" @touchend="idx=-1" @click="scaleD">amplification</el-button>
<el-button :class="{select:idx==1}" @touchstart="idx=1" @touchend="idx=-1" @click="scaleX">narrow</el-button>
<el-button @click="fileDownload(pdfUrl)">download</el-button>
</el-row>
<! - < div > progress: {{loadedRatio}} < / div > < div > page load success: {{curPageNum}} < / div > -- >
</div>
</template>
<script>
import pdf from 'vue-pdf'
import api from '@/api/index'
import notification from 'ant-design-vue/es/notification'
export default {
name: 'AppPdf'.components: {
pdf
},
props: {
pdfSrc: {
type: String.required: true
},
fileName: {
type: String.required: true
},
fid: {
type: Number.required: true
},
loadData: {
type: Function.required: true
}
},
data () {
return {
preDisable: true.nextDisable: false.pdfUrl: ' '.pageNum: 1.pageTotalNum: 1.pageRotate: 0.loadedRatio: 0.// Load progress
curPageNum: 0.scale: 100.// The amplification factor
idx: -1}},watch: {
pdfSrc () {
this.curPageNum = 1
this.pageNum = 1
},
fileName () {
},
pageNum () {
if (this.pageNum === 1) {
this.preDisable = true
} else {
this.preDisable = false
}
if (this.pageNum === this.pageTotalNum) {
this.nextDisable = true
// Request the record interface to save the read record
this.$http
.post(api.ImportantFile, {
params: { fid: this.fid }
})
.then(res= > {
if (res) {
this.$message({
message: 'read' + this.fileName,
type: 'success'
})
this.loadData()
}
})
} else {
this.nextDisable = false}}},methods: {
/ / download PDF
fileDownload (data) {
const filename = this.fileName || 'statements. XLS'
var element = document.createElement('a')
element.setAttribute('href'.encodeURI(this.pdfSrc))
element.setAttribute('download'.'LoginInquiry.pdf')
element.setAttribute('download', filename)
element.style.display = 'none'
document.body.appendChild(element)
element.click()
document.body.removeChild(element)
},
Enlarge / /
scaleD () {
this.scale += 5
this.$refs.pdf.$el.style.width = parseInt(this.scale) + The '%'
},
/ / to narrow
scaleX () {
if (this.scale === 100) {
return
}
this.scale += -5
this.$refs.pdf.$el.style.width = parseInt(this.scale) + The '%'
},
prePage () {
var p = this.pageNum
p = p > 1 ? p - 1 : this.pageTotalNum
this.pageNum = p
},
nextPage () {
var p = this.pageNum
p = p < this.pageTotalNum ? p + 1 : 1
this.pageNum = p
},
clock () {
this.pageRotate += 90
},
counterClock () {
this.pageRotate -= 90
},
password (updatePassword, reason) {
updatePassword(prompt('password is "123456"'))
},
pageLoaded (e) {
this.curPageNum = e
},
pdfError (error) {
console.error(error)
},
pdfPrintAll () {
this.$refs.pdf.print()
},
pdfPrint () {
this.$refs.pdf.print(100[1.2])
}
},
updated () {
// Read directly when there is only one page
if (this.pdfSrc) {
if (this.pageTotalNum === 1) {
// Request the record interface to save the read record
this.$http
.post(api.ImportantFile, {
params: { fid: this.fid }
})
.then(res= > {
if (res) {
notification.success({
message: 'complete'.description: 'read' + this.fileName
})
// this.$message({
// message: 'read' + this.filename,
// type: 'success'
// })
this.loadData()
}
})
}
}
}
}
</script>
Copy the codeIntroduce it where you need it
import AppPdf from './AppPdf.vue'
<app-pdf :pdfSrc="base64Str" :fileName="fileName" :fid="fid" :loadData="loadData" ref="son"></app-pdf>
Copy the code