Vue中实现pdf文件预览功能

写在前面：

实现的功能就是点击预览按钮，弹出对话框在线预览pdf文件

实现此功能的前提是需要在Vue项目中安装组件vue-pdf，

在终端命令行输入运行如下语句：

npm install --save vue-json-excel vue-pdf

安装完组件后，首先在要使用的页面中引入pdf组件

<script>
import pdf from 'vue-pdf'
export default {components: {pdf},data () {return {pdfUrl: '',src: '',}}
}

因为我们是前后端分离的vue项目，pdf的在服务器的位置后台已经返给我了

在点击预览按钮时将该pdf的路径做参数带走：@click="previewFile(item.FILE_URL)"

<el-col :span="3" style="margin-top:20px" v-for="(item,index) in tableData" :key="index"><el-card :body-style="{ padding: '0px'}" style="margin-left:10px"><img :src="item.FILE_URL" class="image" style="height:200px" v-if="item.FILE_TYPE === 1"><img :src="pdfImage" class="image" style="height:180px;width: 80%;margin-left:8%;margin-top:20px" v-else-if="item.FILE_TYPE === 2"><img :src="wordImage" class="image" style="height:180px;width: 80%;margin-left:8%;margin-top:20px" v-else-if="item.FILE_TYPE === 3"><img :src="unknowImage" class="image" style="height:180px;width: 80%;margin-left:8%;margin-top:20px" v-else><div style="padding: 14px;"><div class="bottom clearfix"><el-button type="text" class="button" @click="openImage(item.FILE_URL)" v-if="item.FILE_TYPE === 1">查看大图</el-button><el-button type="text" class="button" @click="downLoad(item.FILE_URL)" v-else>下载</el-button><el-button type="text" class="button" @click="previewFile(item.FILE_URL)" v-if="item.FILE_TYPE === 2">预览</el-button><el-button type="text" class="button" style="float:right" @click="deleteImg(item.ID)">删除</el-button></div></div></el-card>
</el-col>

此时previewFile (file)中的file也就是@click="previewFile(item.FILE_URL)"中的item.FILE_URL，实际上也是pdf的路径，最后将路径处理好赋值给this.src，打开Dialog弹框预览pdf

previewFile (file) {this.pdfUrl = file// 有时PDF文件地址会出现跨域的情况,这里最好处理一下this.src = pdf.createLoadingTask(this.pdfUrl)this.pdfPreviewDialog = true},

然后在页面使用vue-pdf,只需要添加标签<pdf></pdf>，将pdf的路径this.src给:src属性

<el-dialog :visible.sync="pdfPreviewDialog" title="资质凭证"  width="50%" center><pdf :src="src" style="width:100%" ref="pdf"></pdf>
</el-dialog>

然后就没然后啦 ~

注：此功能只能是pdf文件存储服务器和项目运行的服务器一致，否则会报错哦

Vue中实现pdf文件预览功能相关推荐

Vue新手：实现文件预览功能的前端
预览文件的前端省略点击按钮点击触发showdialogview()方法的代码第一种方法先在template中加入一个input框,绑定一个字符串类型的变量写showdialogview()方法 ...
用vue-pdf包实现pdf文件预览，支持分页
vue项目实现pdf文件预览功能下载vue-pdf包 npm install --save vue-pdf template模板内容: //pdf组件 <pdf :src="pdfF ...
Vue PDF文件预览打印vue-pdf
Vue PDF文件预览vue-pdf 最近做项目,遇到预览PDF这个功能,在网上找了找,大多推荐的是pdf.js,不过在Vue中还是想偷懒直接npm组件,最后找到了一个还不错的Vue-pdf 组件,G ...
Office文件转化PDF实现预览功能
OpenOffice文件转PDF 实测有用 OpenOffice办公文件预览功能 OpenOffice操作 aspose-words来实现预览预览操作 OpenOffice办公文件预览功能 Hell ...
jsp 展示服务器pdf文件,pdf在线预览_jsp实现pdf在线预览功能
摘要腾兴网为您分享:jsp实现pdf在线预览功能,钻石星球,桌面时钟,学堂在线,新东方等软件知识,以及新游手柄游戏厅,qq6.2,硬盘坏道,录音盒,番茄花园rom,x架子,内蒙古科协,陕西交管121 ...
mpvue PDF文件预览
小程序中PDF文件预览问题在小程序中可以ios端可以使用 <web-view :src="url"></web-view> 但是在Android端pdf ...
pdf文件预览、打印
前端 pdf 文件预览的方式有多种. html元素:<iframe>.<embed> <iframe :src="pdfUrl " style=&qu ...
java pdf文件下载_Java后台返回PDF文件预览下载
Java后台返回PDF文件预览下载开始的代码的系统代码为: ResponseEntity onePdf = s3Wrapper.download(contractEntity.getContract ...
手机端pdf文件预览pdf.js使用方法详解
虽然H5页面可以通过A直接访问html 但可惜的是手机端H5页面这样做就直接变下载了那么想要实现手机端的pdf文件预览就需要用到pdf.js了首先我们访问地址 http://mozilla.g ...

Vue中实现pdf文件预览功能

Vue中实现pdf文件预览功能相关推荐

最新文章

热门文章