vue安装vue-pdf(pdf预览) # NPM NPM安装--save vue-pdf #页面浏览//pdf预览导入pdf from ' vue-pdf '； 第#页为Home.vue
src/views/Home.vue
templatedivclass=' main ' div buttontype=' button ' @ click=' changepdfpage (0)上一页/button buttontype=' button @ type='button'@click='scaled ()放大/buttonbuttontype='buttontype ) ) button ) button 652 divdivbuttonty button buttontype=' button ' @ click=' counter clock ) '逆时针/button'@click ) )逆时针divpdfref=' pdf ' : src=' src ' : page=' current page ' 3360 rotate=' page rotate ' @ num div/templatescript//pdf预览导入pdf from ' vue-pdf '； 导出默认值{ name : ' home，components: { pdf }， 数据() return ) src : ' http://storage.xuetangx.com/public _ assets/xuetangx/pdf/playerapi _ v1.0.6. PPP 、methods: { //pdf加载时loadpdfhandler(e )； this.currentPage=1； //加载时先加载第一页}，如果更改//pdf的页码，则从val开始上一页的下一页的值、0上一页、第一页的changepdfpage(val )、if (val==0thithid }，//放大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 ) ' % '；//顺时针clock () { this.pageRotate =90；//逆时针旋转counterClock () { this.pageRotate -=90； }； }；/scriptstylescoped.main { width :500 px； margin : 0自动； border : 2px固态# 409 eff； padding: 10px； }/style默认情况下显示第一页
更多请看文档：https://www.npmjs.com/package/vue-pdf