首页 > 学术百科

vue+iview下pdf预览

vue+iview下pdf预览1.安装 npm install --save vue-pdf

2.在需要使⽤的页⾯引⼊pdf：import pdf from 'vue-pdf'

3.在需要使⽤的使⽤组件就⾏

笛卡儿坐标

<pdf

ref="pdf"

:src="pdfView"

:page="pageNum"

:rotate="pageRotate"

@progress="loadedRatio = $event"

课堂内外初中版

@page-loaded="pageLoaded($event)"

@num-pages="pageTotalNum=$event"

@error="pdfError($event)"

华安现金富利@link-clicked="page = $event"

></pdf>

参数定义：

// pdf预览

pageNum: 1,

pageTotalNum: 1,

pageRotate: 0,

// 加载进度

loadedRatio: 0,

curPageNum: 0,

footerHide: true,

pdfView: '',

pdfShow: false，

⽅法：

// 上⼀页函数，

prePage () {

var page = this.pageNum

page = page > 1 ? page - 1 : this.pageTotalNum

this.pageNum = page

// 下⼀页函数

nextPage () {

this.$refs.scollElement.scrollTop = 0

var page = this.pageNum

page = page < this.pageTotalNum ? page + 1 : 1东海小哨兵

this.pageNum = page

// 页⾯加载回调函数，其中e为当前页数

pageLoaded (e) {

this.curPageNum = e

// 其他的⼀些回调函数。

pdfError (error) {

<(error)

点击事件，判断当点击的⽂件后缀是pdf的时候就打开预览if ('pdf'.indexOf(suffix) !== -1) {

缝隙腐蚀fetch({

url: `${this.viewUrlVideo}/${id}`,

method: 'get'

}).then((res1) => {

let src = ateLoadingTask(res1.data.viewUrl) this.pdfView = src

this.pdfShow = true

})

成都广播影视学院}

本文发布于:2024-09-22 03:57:06，感谢您对本站的认可！

本文链接：https://www.17tex.com/xueshu/396773.html

上一篇：iviewBadge组件count传值

下一篇：iview的表格自定义_vue+iview实现可编辑表格的示例代码

标签：点击预览时候回调

留言与评论（共有 0 条评论）