一.使用vue-pdf进行pdf的预览，但是此种方法并不能预览带签章的pdf，尝试了网上提供的多种方法均不能实现pdf带签章的渲染
首先你需要安装 npm install --save vue-pdf
很多人引用的时候可能会出现只能展示pdf第一页的情况，这时候你可以看下官网的说明
官网链接www.npmjs.com/package/vue…
完整的项目如下：
<template>
<div class="acthorization">
<pdf ref="pdf" v-for="i in numPages" :key="i" :page="i" :src="src" @page-loaded="pageLoaded($event)" class="authorize-img" style="width: 100%; height: auto;"></pdf>
<MButton text="下一步" @click="jump"></MButton>
</div>
</template>
<script>
import { MButton } from '@/components/button/index'
import pdf from 'vue-pdf'
export default {
props: {
source: {
type: Number,
default: 0
},
path: {
type: String,
default: '/inputMessage'
}
},
data () {
return {
headers: {},
creditAuthId: {
creditAuthId: window.localStorage.creditAuthId
},
src: '',
loadedRatio: 0,
curPageNum: 0,
numPages: 0,
text: '/pdf/XY-V2.0-legal20191219-cl.pdf'
}
},
components: {
MButton,
pdf
},
mounted () {
this.loadPdfHandler()
},
methods: {
loadPdfHandler () {
this.src = pdf.createLoadingTask({
url: this.text
})
this.src.promise.then(pdf => {
this.numPages = pdf.numPages
this.$store.commit('hideLoading')
})
},
pageLoaded (e) {
this.curPageNum = e
if (this.curPageNum === 1) {
}
},
jump () {
this.$router.push({ path: this.path, query: { to: '/face/identity' } })
}
},
watch: {
}
}
</script>
<style lang="less" scoped>
.acthorization{
height:11.9rem;
background:@white;
.authorize-img{
height:9.71rem;
}
}
</style>
我这个是预览本地的pdf文件，如果你需要请求线上的链接，你只需要把this.text换成你需要的请求链接即可，但是这有可能会存在跨域的问题，这时候你需要解决跨域的问题。
二.使用pdf.js进行pdf的预览，这种方法能进行带签章的pdf的预览
这时候你需要去官网下载pdf的安装报，放到你的public的文件下官网下载链接mozilla.github.io/pdf.js/
完整的项目如下所示
<template>
<div class="acthorization">
<iframe :src="src" frameborder="0" width="100%" height="100%"></iframe>
<MButton text="下一步" @click="jump"></MButton>
</div>
</template>
<script>
import { MButton } from '@/components/button/index'
import { getpdfUrl } from '@/api/authorization.js'
export default {
props: {
source: {
type: Number,
default: 0
},
path: {
type: String,
default: '/inputMessage'
}
},
data () {
return {
headers: {},
creditAuthId: {
creditAuthId: window.localStorage.creditAuthId
},
src: '',
loadedRatio: 0,
curPageNum: 0,
numPages: 0
}
},
components: {
MButton
},
mounted () {
this.loadPdfHandler()
},
methods: {
loadPdfHandler () {
getpdfUrl(this.creditAuthId).then(res => {
if (res.code === '200') {
this.src = `/pdfjs-2.4.456-es5-dist/web/viewer.html?file=${encodeURIComponent(res.data.url + '&.pdf')}`
this.$toast.success(res.msg)
} else {
this.$toast.fail(res.msg)
}
})
},
jump () {
this.$router.push({ path: this.path, query: { to: '/face/identity' } })
}
}
}
</script>
<style lang="less" scoped>
.acthorization{
height:11.9rem;
background:@white;
.authorize-img{
height:9.71rem;
}
}
</style>
你在拼接你的请求链接的时候应该如this.src = `/pdfjs-2.4.456-es5-dist/web/viewer.html?file=${encodeURIComponent(res.data.url + '&.pdf')}`这种拼接方式，前面是你pdf.js在项目中所在位置，后面是你的请求链接，‘&.pdf’是防止pdf.js的方法不解析的问题，encodeURIComponent是如果你的请求链接带参，如果不带参数可以不加
