Vue project implements PDF file preview function
Download the vue-pdf package
npm install --save vue-pdf
template template content:
//pdf component<pdf :src="pdfFile"
:page="currentPage"
@num-pages="pageCount=$event"
@page-loaded="currentPage=$event"
@loaded="loadPdf">
</pdf>
//Pagination<div class="pageButton">
<el-button size="mini" @click="changePage(0)" round>Previous page</el-button>
<span> {{currentPage}} / {{pageCount}} </span>
<el-button size="mini" @click="changePage(1)" round>Next page</el-button>
</div>
Introduce components and define variables
// Import and reference in vue fileimport pdf from "vue-pdf";
export default {
components: {
pdf,
},
//Define variable data(){
return {
pdfFile: "", //pdf file address currentPage: 0, // Page number pageCount: 0, // Total page count }
},
methods:{
// Turn page changePage (val) {
if (val === 0 && > 1) {
--;
}
if (val === 1 && < ) {
++;
}
},
// When pdf is loading loadPdf () {
= 1 // Load the first page first when loading },
}
}
vue-pdf implements pdf online preview
1. First install vue-pdf and enter the following code in the command line:
npm install --save vue-pdf
2. Page reference, new
<template>
<div class="ins-submit-docs-content ins-submit-docs-pdf">
<div v-if="loading" style="position: absolute; top: 40%; width: 100%;text-align: center;">
<van-loading type="spinner" color="#fc8955" />
</div>
<van-empty description="Document loading failed" v-if="loadingError" />
<pdf ref="morePDF" :src="src"></pdf>
</div>
</template><script>
import Vue from 'vue';
import pdf from 'vue-pdf'
import { Loading } from 'vant';
(Loading);
export default {
name : 'ins-docs-pdf',
props : {
src : {
type : String, //Default value, select value default : ''
}
},
data(){
return {
loading : true, //loading loadingError : false, //Loading failed }
},
watch : {
src : {
deep : true,
immediate: true,
handler(val){
if(val){
(val)
}
}
}
},
components: {
pdf
},
methods:{
//Calculate the total number of pdf page numbers getPDFnums(url) {
= true
//let loadURL = (url)
let loadURL = ({
url: url,//Your pdf address })
(pdf => {
this.$set(this, '', )
= false
}).catch(err => {
= false;
= true;
})
}
}
}
</script>3、When there are many pages on the PDF, the v-for loop is directly, directly display
<template>
<div class="ins-submit-docs-content ins-submit-docs-pdf">
<div v-if="loading" style="position: absolute; top: 40%; width: 100%;text-align: center;">
<van-loading type="spinner" color="#fc8955" />
</div>
<van-empty description="Document loading failed" v-if="loadingError" />
<pdf ref="morePDF" :src="src" :page="i" v-for="i in numPages" :key="i"></pdf>
</div>
</template><script>
import Vue from 'vue';
import pdf from 'vue-pdf'
import { Loading } from 'vant';
(Loading);
export default {
name : 'ins-docs-pdf',
props : {
src : {
type : String, //Default value, select value default : ''
}
},
data(){
return {
loading : true, //loading loadingError : false, //Loading failed numPages : 0,
}
},
watch : {
src : {
deep : true,
immediate: true,
handler(val){
if(val){
(val)
}
}
}
},
components: {
pdf
},
methods:{
//Calculate the total number of pdf page numbers getPDFnums(url) {
= true
//let loadURL = (url)
let loadURL = ({
url: url,//Your pdf address })
(pdf => {
=
this.$set(this, '', )
= false
}).catch(err => {
= false;
= true;
})
}
}
}
</script>4. When the PDF is large, you will find that the PDF loads back very slowly and occasionally pops up;
At this time, the following code was used;PDF pagination display;
And solve the problem that Chinese is occasionally garbled when previewing PDF, and borrow CMapReaderFactory from VUE-PDF.
<template>
<div class="ins-submit-docs-content ins-submit-docs-pdf">
<div v-if="loading" style="position: absolute; top: 40%; width: 100%;text-align: center;">
<van-loading type="spinner" color="#fc8955" />
</div>
<van-empty description="Document loading failed" v-if="loadingError" />
<div v-show="numPages <= 50">
<pdf ref="morePDF" :src="src" :page="i" v-for="i in numPages" :key="i"></pdf>
</div>
<div v-show="numPages > 50">
<pdf ref="PDF" :src="src" :page="currentPage" @num-pages="numPages=$event" @loaded="loadPdfHandler"></pdf>
<div class="ins-pdf-button-box">
<span @="prePage">Previous page</span>
<span>{{currentPage}}/{{numPages}}</span>
<span @="nextPage">Next page</span>
</div>
</div>
</div>
</template><script>
import Vue from 'vue';
import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/';
import { Loading } from 'vant';
(Loading);
export default {
name : 'ins-docs-pdf',
props : {
src : {
type : String, //Default value, select value default : ''
}
},
data(){
return {
loading : true, //loading loadingError : false, //Loading failed numPages : 0, //Pagination currentPage : 1, //The current number of pages displayed }
},
watch : {
src : {
deep : true,
immediate: true,
handler(val){
if(val){
(val)
}
}
}
},
components: {
pdf
},
methods:{
//Calculate the total number of pdf page numbers getPDFnums(url) {
= true
//let loadURL = (url)
let loadURL = ({
url: url,//Your pdf address CMapReaderFactory
})
(pdf => {
=
= 1
this.$set(this, '', )
= false
}).catch(err => {
= false;
= true;
})
},
// Previous page prePage() {
var page =
page = page > 1 ? page - 1 :
= page
},
// Next page nextPage() {
var page =
page = page < ? page + 1 : 1
= page
},
// Callback loadPdfHandler(e) {
= e
}
}
}
</script>Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.