使用依赖:vue-pdf 实现需求:将 PDF url 地址 转换为本地页面预览
< template>
< div class = " pdf -preview" >
< NavBar />
< div class = " container" >
< VuePdf v-for = " i in numPages" :key = " i" class = " pdf " :src = " src" :page = " i" > </ VuePdf>
</ div>
</ div>
</ template>
< script>
import { Toast } from 'vant'
export default {
name : 'PdfPreview' ,
components : {
VuePdf : ( ) => import ( 'vue-pdf ' ) ,
} ,
props : { } ,
data ( ) {
return {
pdf Url: '' ,
numPages : '' ,
src : '' ,
}
} ,
created ( ) {
this . pdf Url = this . $route. query. pdf Url
this . loadingPDF ( this . pdf Url)
} ,
methods : {
async loadingPDF ( url ) {
if ( ! url) return
try {
const { default : pdf } = await import ( 'vue-pdf ' )
this . src = pdf . createLoadingTask ( url)
this . src. promise
. then ( pdf => {
this . numPages = pdf . numPages
} )
. catch ( error => Toast ( error. message) )
} catch ( error) {
console. info ( error)
}
} ,
} ,
}
</ script>
< style lang = " scss" scoped >
.pdf -preview {
width : 100%;
height : 100%;
.container {
width : 100%;
height: calc(100% - # { $vue-container-top-height} ) ;
background : #f5f5f5;
position : relative;
overflow-y : scroll;
.pdf {
width : 100%;
&:not(:last-child) {
margin-bottom : 10px;
}
}
}
}
</ style>