实现分页显示pdf

比眉伴天荒 2022-08-30 05:23 248阅读 0赞

<Modal title="" v-model="previewContract" :width="1200">
    	<div slot="footer">
    		<div class="tc">
    			<Button @click="changePdfPage(0)" class="turn">上一页</Button>
    			{
       {contractCurrentPage}}  /  {
       {contractPageCount}}
    			<Button @click="changePdfPage(1)" class="turn">下一页</Button>
    		</div>
    		<Button @click="previewContract = false">取消</Button>
                  <Button type="primary" class="btn-warning" @click="downloadPdf">下载PDF</Button>
            	</div>
    	<div>
    		<pdf 
    			:src="src"
    			:page="contractCurrentPage"
    			@num-pages="contractPageCount = $event"
    			@page-loaded="contractCurrentPage = $event"
    			@loaded="loadPdfHandler">
    		</pdf>
    	</div>
    	
    </Modal>

data() { 
    	return { 
    		contractPageCount: 0, // 总页数
    		contractCurrentPage: 0, // 当前页
    	}
    },
    methods: { 
    	// 分页显示pdf
    	changePdfPage (val) { 
    		if (val === 0 && this.contractCurrentPage > 1) { 
    			this.contractCurrentPage--
    		}
    		if (val === 1 && this.contractCurrentPage < this.contractPageCount) { 
    			this.contractCurrentPage++
    		}
    	},
    	// pdf加载时先加载第一页
    	loadPdfHandler () { 
    		this.contractCurrentPage = 1
    	}
    }

[Vue PDF文件预览vue-pdf][Vue PDF_vue-pdf]

[Vue PDF_vue-pdf]: https://www.cnblogs.com/steamed-twisted-roll/p/9648255.html

发表评论取消回复

表情：

评论列表（有 0 条评论，248人围观）

还没有评论，来说两句吧...

相关阅读

相关 php+mysql实现分页显示

数据库部分 DROP TABLE IF EXISTS `guestbook`; CREATE TABLE `guestbook` ( `id` m

超、凢脫俗/ 2022年12月29日 09:54/ 0 赞/ 86 阅读

相关 jsp实现分页显示记录

最近这几天在做留言板的过程中，遇到了一个问题。先看一张截图： ![SouthEast][] 这是随便在一个新闻的留言页面截的

àì夳堔傛蜴生んèń/ 2022年09月19日 10:41/ 0 赞/ 190 阅读

相关实现分页显示pdf

<Modal title="" v-model="previewContract" :width="1200"> <div slot="footer">

比眉伴天荒/ 2022年08月30日 05:23/ 0 赞/ 249 阅读

相关 Struts实现分页显示数据

//操作的数据库中的表名为：UserInfo，有三个属性：userId，userName，userPassword（顾名思义）首先为UserInfo表构造一个相对

柔光的暖阳◎/ 2022年07月14日 07:21/ 0 赞/ 213 阅读

相关 SSH实现数据分页显示功能

之前使用许多技术做过数据的分页显示功能,像pager-taglib分页框架,还有许多前端技术自带的分页.但很少使用框架自己尝试写分页,剖析分页的原理.现在自己实现一个数据分页

「爱情、让人受尽委屈。」/ 2022年06月07日 05:21/ 0 赞/ 244 阅读

相关实现超长文本分页显示

一代码 1、index.php <?php if ($_GET[page]=="") {$_GET[page]=1;}; include("function.

深碍√TFBOYSˉ_/ 2022年05月11日 23:06/ 0 赞/ 186 阅读

相关 mybatis实现MySQL分页显示

SQL语句 select \ from table\_name limit startNum,Size 这句话的意思是从第startNum个数据开始（索引从0开始），

ゞ浴缸里的玫瑰/ 2022年05月11日 00:50/ 0 赞/ 255 阅读

相关 JS简单实现分页显示

> 完整代码源码可以在[这里][Link 1]下载 1.在 HTML文件建立列表目标节点和翻页器目标节点 <body>

冷不防/ 2022年04月05日 13:28/ 0 赞/ 333 阅读

相关 SpringBoot+Mybatis+Jqgrid实现分页显示

此处就不对SpringBoot+Mybatis等环境进行说明，主要细说实现Jqgrid的分页显示功能的具体步骤，首先得去Jqgrid官网下载js插件包，链接为：[

旧城等待，/ 2021年09月23日 14:44/ 0 赞/ 395 阅读

相关 android listview表格分页显示,Android ListView分页简单实现

Android ListView分页简单实现分页，开发应用中必不可少。那么，现在就来实现分页功能。首先来想想实现它要有哪些步骤， 1, 实现的组件， 2、初始化第一

╰+哭是因爲堅強的太久メ/ 2021年09月07日 23:38/ 0 赞/ 482 阅读