vue-pdf插件实现PDF预览功能

在做的Vue项目中，遇到了要上传文件，其中pdf要实现预览，网上查到vue-pdf插件可实现该功能。实现步骤如下：

1.安装插件

npm install --save vue-pdf

2.简单的demo 完整代码

<template><div><a @click="handlePreview()" alt="查看文件" class=""><a-icon type="eye" /></a><a-modal width='1000px' :visible="previewPdfVisible" @cancel="handlePdfCancel" @ok="handlePdfCancel"><pdf ref="pdf":src="url"></pdf></a-modal></div></template>
<script>export default {components:{pdf},data(){return {url:"",}},methods:{//查看文件handlePreview(){let fileUrl='http://10.4.4.83:9999/sys/common/static/temp/1645755049088.pdf';this.previewPdfVisible=true;this.url=fileUrl;},}}
</script><style></style>

以上只能展示一页

3.多页展示

<template><div><a @click="handlePreview()" alt="查看文件" class=""><a-icon type="eye" /></a><a-modal width='1000px' :visible="previewPdfVisible" @cancel="handlePdfCancel" @ok="handlePdfCancel"><pdf ref="pdf"v-for="i in pdfNumPages":key="i":page="i":src="previewPdf">></pdf></a-modal></div></template>
<script>import pdf from 'vue-pdf';export default {components:{pdf},data(){return {previewPdfVisible:false,previewPdf:"",pdfNumPages: null, // pdf 总页数}},methods:{handlePdfCancel(){this.previewPdfVisible = false;},//查看文件handlePreview(){let fileUrl='http://10.4.4.83:9999/sys/common/static/temp/结算中心_1645755049088.pdf';this.previewPdfVisible=true;this.previewPdf=fileUrl;//计算pdf页码总数let loadingTask = pdf.createLoadingTask(this.previewPdf)loadingTask.promise.then(pdf => {this.pdfNumPages = pdf.numPages}).catch(err => {console.error('pdf 加载失败', err);})},}}
</script><style></style>

vue-pdf插件实现PDF预览功能相关推荐

vue图片缩略图及图片预览功能
前言上次有个需求,是要给图片做个缩略图以及预览功能.其实用vue来实现是很简单的, 几句代码可以搞定,也不需要什么额外的插件. 效果如下: vue显示图片缩略图 vue显示图片预览功能核心代码两 ...
【Vue实用功能】Vue实现文档在线预览功能，在线预览PDF、Word、Excel、ppt等office文件
文章目录 @[TOC](文章目录) 方法一. Luckysheet 预览方法二. Office Web 查看器(微软的开发接口) 方法三. XDOC文档预览云服务(预览pdf.word.xls.pp ...
php 存PDF文件及其在线预览功能
正值奥运时期,一觉醒来有种想用PHP打印PDF来记录各国金牌的想法,即使中国队那么不争气我也忍了. 今天使用的类叫FPDF,FPDF这个PHP Class允许你采用纯PHP(更确切地说就是不需要使用P ...
Vue+SpringBoot实现Excel在线预览功能（PS：添加样式比较费劲）
** 问题还原: ** 在做项目时,用户需要上传Excel模板,里面有对应的各种数据.我们拿到这个Excel后,定时的根据其中的数据去查对应的实时数据并进行计算,然后将实时数据和计算后的数据保存到Ex ...
Vue新手：实现文件预览功能的前端
预览文件的前端省略点击按钮点击触发showdialogview()方法的代码第一种方法先在template中加入一个input框,绑定一个字符串类型的变量写showdialogview()方法 ...
vue中pdf预览组件_Vue+ElementUI使用vue-pdf实现预览功能
Vue + ElementUI项目中使用vue-pdf实现简单预览,供大家参考,具体内容如下 1.安装 vue-pdf npm install --save vue-pdf 2.在vue页面中导入对应 ...
前端【vue】实现文档在线预览功能，在线预览pdf、word、xls、ppt等office文件
前端江太公前端实现文档在线预览功能最直接的就是使用XDOC 文档云服务 XDOC可以实现预览以DataURI表示的DOC文档,此外XDOC还可以实现文本.带参数文本.html文本.json文本.公 ...
实现微信小程序和手机app（基于vue）PDF预览功能
引言:最近在做微信小程序和手机端app开发(基于vue),实现一个pdf预览功能. 需求:点击pdf列表,跳转到预览pdf页面,页面上强制阅读10s后,显示一个按钮返回,更新阅读状态: 要求:不能调用 ...
前端vue实现pdf文件的在线预览
3.前端vue实现pdf文件的在线预览我是通过 <iframe> 标签就可以满足我工作的 pdf预览需求如果<iframe> 无法满足需求 , 可以使用pdf.js这个插件 ...
java零碎要点010---Java实现office文档与pdf文档的在线预览功能
最近项目有个需求要java实现office文档与pdf文档的在线预览功能,刚刚接到的时候就觉得有点难,以自己的水平难以在三四天做完.压力略大.后面查找百度资料.以及在同事与网友的帮助下,四天多把它做完 ...

vue-pdf插件实现PDF预览功能

vue-pdf插件实现PDF预览功能相关推荐

最新文章

热门文章