实现分页显示pdf

比眉伴天荒 2022-08-30 05:23 309阅读 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 条评论，309人围观）

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

相关阅读

相关 Java的PDF分页操作：分页读取、分页拆分

本文以Java示例展示读取PDF分页读取、分页拆分的方法。 1、分页读取 1.1 [Maven][]仓库下载导入在pom.xml中配置maven路径，指定依赖，

旧城等待，/ 2023年09月30日 12:36/ 0 赞/ 31 阅读

相关 Flask实现分页显示数据

Flask实现分页显示数据效果图在做网页的时候，通常会展示很多数据，如果把全部数据放在一页显示的话，会让浏览器加载变得更慢，所以通常在展示很多数据的时候进行分页显示，让

傷城~/ 2023年01月19日 14:55/ 0 赞/ 14 阅读

相关 php+mysql实现分页显示

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

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

相关 jsp实现分页显示记录

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

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

相关实现分页显示pdf

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

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

相关 Struts实现分页显示数据

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

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

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

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

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

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

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

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

相关 mybatis实现MySQL分页显示

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

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

相关 JS简单实现分页显示

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

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