vue使用vue-pdf

效果

引入vue-pdf

npm install --save vue-pdf

vue版本
"vue": "^2.6.11",
"vue-pdf": "^4.3.0",

1.在使用页面引入

import pdf from "vue-pdf";components: {  //组件searchTop,wordLabelPop,pdf}

2.使用

<pdf ref="pdf" @progress="pdfload($event)" //pdf加载进度，不用可无视:src="pdfObj.pdfUrl"   //pdf在线地址:page="pdfObj.currentPage"   //当前显示页数:style="{width: imgSize+'%'}">  //动态控制当前页大小，不用可无视
</pdf>----常用pdf 回调
page: 当前显示的页数，比如第一页page=1
rotate ： 旋转角度，比如0就是不旋转，+90，-90 就是水平旋转。
progress ：当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了。
page-loaded ：页面加载成功的回调函数，不咋能用到。
num-pages ：总页数
error ：加载错误的回调
link-clicked：单机pdf内的链接会触发。注意：
我是单页显示，如果你想一次性显示多页，那就是这样
<pdf  v-for="i in numPages" :key="i"  :src="url" :page="i"></pdf>

需求：一次性加载完pdf后，实现预览当前单页的pdf

所有只需要控制相应的页数就行
重点：
检测页数变化，区间控制显示

// 根据当前页数定位到相应目录this.activeLink = this.allListData.findIndex(item => {return this.pagination.startPage >= item.startPage && this.pagination.startPage <= item.endPage});

注意点：vue-pdf是canvas渲染，注意的地方是做自适应大小的时候会一直重绘当前pdf显示，如果是一次性渲染出所有pdf页面那会体验很不好，我能想到的办法就是在一定范围内定义好宽度，然后设置其父盒子的比例

vue使用vue-pdf相关推荐

vue 页面生成pdf并下载 vue页面转PDF
一: 安装插件 // 第一个.将页面html转换成图片 npm install --save html2canvas // 第二个.将图片生成pdf npm install jspdf --save ...
vue 前端导出PDF文件学起来
首先用 npm 引入 pdf 需要的依赖,之后需要进行二次封装,才能应用 npm install html2canvas npm install jspdf --------------------- ...
SpringBoot+Vue+mybatis生成pdf文件（表头跟页码，适应上传linux服务器后的操作）
SpringBoot+Vue+mybatis生成pdf文件(表头跟页码,适应上传linux服务器后的操作) 为什么使用后端去生成说明依赖后端目录控制器代码模板代码前端代碼最終效果为什么 ...
前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现
前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现 1.vue项目pdf展示 2.pdf工具栏放大缩小功能文章目录前端vue项目(使用pdf.js) pdf展示及pdf工 ...
vue页面导出pdf文档并上传pdf格式给后台
下载依赖 yarn add html2canvas // 将页面html转换成图片 yarn add jspdf // 将图片生成pdf 定义全局函数,创建htmlToPdf.js文件 import ...
uniapp（vue）生成PDF
因业务需求,需要由前端来生成PDF,之前是后端生成的PDF,不够美化,所以我就在网上找了找实现方式,基本上全部都是由html2canvas和jspdf生成的,实现方式都是由html2canvas将页面 ...
vue 页面转pdf 并下载
最近需要做一个下载vue页面为pdf格式的功能,网上方案有很多,也尝试了其他方案,最终采用的方案流程就是点击下载报告按钮,则请求后端一个接口,例如接口地址为example.cn/file/downl ...
VUE预览PDF文件并利用pdf.js获取鼠标选中的文字和搜索，在iframe中获取选中文字，监听鼠标事件，右键菜单
一.VUE预览PDF文件并利用pdf.js获取鼠标选中的文字和搜索需求实现:vue实现预览pdf文件,获取到鼠标选中的文字数据.调用pdf.js自带的搜索方法实现搜索功能(后期可以调用该接口满足其他 ...
vue页面生成pdf 完整demo 及其踩得坑
bug 导出图片不显示这里是图片跨域了这里一般情况下都是用的html2canvas自带的方法 useCORS: true,(ps): 一般情况下不行看脸也有说是阿里的图片上传限制了只要去后置设置下请 ...
Vue下载本地pdf、word、excel文件
Vue下载本地pdf.word.excel文件项目需求具体实现注意项目需求在项目中需要对pdf.word.excel等文档的下载也就是获取文件的静态路径,下载到本地. 方案 :利用 axi ...

vue使用vue-pdf

vue使用vue-pdf相关推荐

最新文章

热门文章