vue中pdf预览组件_Vue+ElementUI使用vue-pdf实现预览功能

Vue + ElementUI项目中使用vue-pdf实现简单预览,供大家参考,具体内容如下

1、安装 vue-pdf

npm install --save vue-pdf

2、在vue页面中导入对应的组件

我这是通过点击 预览 按钮 获取id打开一个dialog来实现

:visible.sync="viewVisible" width="80%" center

@close='closeDialog'>

上一页

下一页

当前第{{pdfPage}}页 / 共{{pageCount}}页

:src="src"

:page="pdfPage"

@num-pages="pageCount = $event"

@page-loaded="pdfPage = $event"

style="display: inline-block; width: 100%"

>

import pdf from 'vue-pdf';

export default {

components: {

pdf

},

data() {

return {

//PDF预览

viewVisible: false,

src: null,

pdfPage : 1,

pageCount: 0,

}

},

methods:{

//PDF预览

previewPDF(row){

this.src = pdf.createLoadingTask(documentConstants.previewPDFUrl+row.contractId);

this.src.then(pdf => {

this.viewVisible = true;

});

},

//关闭窗口初始化PDF页码

closeDialog(){

this.pdfPage = 1;

},

//PDF改变页数

previousPage(){

var p = this.pdfPage

p = p>1?p-1:this.pageCount

this.pdfPage = p

},

nextPage(){

var p = this.pdfPage

p = p

this.pdfPage = p

}

}

}

3、Controller的返回

@RequestMapping(value = "/previewPDF/{contractId}")

public ResponseEntity previewPDF(@PathVariable Long contractId) throws TException, IOException {

ContractAttachmentTmpModelDTO model = contractScanManagementRpcService.queryContractAttachmentTmp(contractId);

HttpHeaders headers = new HttpHeaders();

headers.setContentDispositionFormData("attachment", model.getAttachmentName());

headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);

return new ResponseEntity(model.getAttachmentData(),

headers, HttpStatus.OK);

}

总结:这个是实现一个简单的预览功能。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持谷谷点程序。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/397930.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

酒店预定系统

系统功能模块功能图 用例图 E-R图 转载于:https://www.cnblogs.com/qlly-20/p/9052461.html

leetcode 145. Binary Tree Postorder Traversal

传送门 145. Binary Tree Postorder Traversal QuestionEditorial SolutionMy SubmissionsTotal Accepted: 106482Total Submissions: 291244Difficulty: HardGiven a binary tree, return the postorder traversal of its nodes values. For example:Given binary tree {1,#…

74-A/D指标,Accumulation/Distribution,积累/派发线,离散指标.(2015.7.1)

A/D指标,Accumulation/Distribution积累/派发线,离散指标观井映天2015.7.1转载于:https://www.cnblogs.com/i201102053/p/10626638.html

linux 密码修改下次,问题:如何强制用户在下次登录Linux时更改密码

当你使用默认密码创建用户时,你必须强制用户在下一次登录时更改密码。当你在一个组织中工作时,此选项是强制性的。因为老员工可能知道默认密码,他们可能会也可能不会尝试不当行为,看到下图会不会有为用户担心的感觉:使用 passwd 命…

tableau获取筛选器值_认识Tableau中的筛选器

Tableau中的筛选器:(1)提取筛选器(2)数据源筛选器(3)上下文筛选器(4)维度筛选器(5)度量筛选器(6)参数筛选器(7)表计算筛选器(8)页面筛选器对筛选器进行简单的分类:数据层(提取筛选器、数据源筛选器、上下文筛选器、参数筛选器)视图层(维度筛选器、度量筛…

类与对象的实例属性

class Chinese: countrychina def __init__(self,name): self.namename def playball(self,ball): print(%s正在打%s%(self.name,ball))name1input(>>>)#输入输出尽量别放函数里p1Chinese(name1)p1.playball(足球)print(p1.country)#china,类的…

svn的merge使用例子

先说说什么是branch。按照Subversion的说法,一个branch是某个development line(通常是主线也即trunk)的一个拷贝,见下图: branch存在的意义在于,在不干扰trunk的情况下,和trunk并行开发&#xf…

C# 课堂总结2-数据类型及转换方式

一、输入输出语句 Console.ReadLine(); 会等待直到用户按下回车,一次读入一行Console.ReadKey(); 则是等待用户按下任意键,一次读入一个字符。 二、数据类型 主要掌握: 1.值类型:int 整型,float 浮点型(单精…

linux编译c gedit,[2018年最新整理]LINUX-Gedit文本编辑器.ppt

[2018年最新整理]LINUX-Gedit文本编辑器Gedit文本编辑器 系别:电信系 班级:08 自动化 姓名:张小亚 学号: 30 号 辅导老师:兰建平 Gedit的启动与打开文本 Gedit可以用命令或主菜单的方式两种方式启动。打开文件可以在终…

jsx怎么往js里传参数_在vue中使用jsx语法的使用方法

什么是JSX?JSX就是Javascript和XML结合的一种格式。React发明了JSX,利用HTML语法来创建虚拟DOM。当遇到我为什么要在vue中用JSX?想折腾一下呗,开玩笑.最开始是因为近期在学习react,在里面体验了一把jsx语法,发现也并没有别人说的很难受的感觉啊,于是就想尝试在vue…

如何对数据库中的表以及表中的字段进行重命名

貌似没有直接的SQL语句可以做到这一点,除非删除再加。。。 SQL SERVER 中提供了存储过程:SP_RENAME 对表进行重命名: 更多详见:https://msdn.microsoft.com/zh-cn/library/ms188351.aspx转载于:https://www.cnblogs.com/xwgli/p/4…

系统优化-----sysctl.conf文件内核设置参数详解

摘自https://blog.csdn.net/tallercc/article/details/52823075 sysctl.conf工作原理 sysctl命令被用于在内核运行时动态地修改内核的运行参数,可用的内核参数在目录/proc/sys中。它包含一些TCP/IP堆栈和虚拟内存系统的高级选项, 这可以让有经验的管理员…

How Tomcat works — 一、怎样阅读源码

在编程的道路上,通过阅读优秀的代码来提升自己是很好的办法。一直想阅读一些开源项目,可是没有合适的机会开始。最近做项目的时候用到了shiro,需要做集群的session共享,经过查找发现tomcat的session本身就支持,发现自己…

linux c字符连接,C 语言实例

指针方法:#include int main(){char str1[100], str2[100], *p str1,n 0;printf("请输入第一个字符串:");scanf("%s", str1);printf("请输入第二个字符串:");scanf("%s", str2);while (*p ! \0);/*移动指针到str1尾*/--p…

plot画分段函数_python画图函数大全

很多时候,我们需要用python画图,这样就可以更加直观的看到数据的走势,而不是干巴巴的数字。今天,我们就给大家整理了一下python画图的常用函数,由于篇幅限制。无法将这些函数的使用方法全部表现出来。所以,…

BZOJ 2145 悄悄话

悄悄话 写的筋疲力尽,从下午8点开始写,现在已经一点半了。 主要就是一个暴力,然后加上算权值。用单词词频来搞。 但是第10个测试点 Madam, Im Adam.出事了,因为我有符号还是会把单词分开,然后无法识别Im 最后强行面向数…

第9章 使用ssh服务管理远程主机。

章节简述: 学习使用nmtui命令配置网卡参数、手工将多块网卡做绑定、使用nmcli命令查看网卡信息和使用ss命令查看网络及端口状态。 完整演示sshd服务配置方法并详细讲述每个参数的作用,实战基于密钥远程登陆实验以及用screen服务让远程会话不再终断。 本…

enum不能被继承

1、枚举类介绍 如果一个类的实例是有限且确定的,那么可以使用枚举类。比如:季节类,只有春夏秋冬四个实例。 枚举类使用enum进行创建,其实例必须从”第一行“开始显示写出。 enum Season{SPRING,SUMMER,FALL,WINTER;//默认public s…

linux不适合数据传输,【Linux调试经验】局域网内数据传输不经过路由

问题/发现:本人在为一款路由器写一个统计局域网互传流量的Linux内核模块的时候,发现如下问题:局域网内的一台设备和该局域网内另一台设备进行通信时,我在路由器的netfilter链表处设下钩子,以捕获数据。后来发现这些数据…

kali linux 升级命令_作为高级Java,你应该了解的Linux知识

原创:小姐姐味道(微信公众号ID:xjjdog),欢迎分享,转载请保留出处。作为一个javaer,我以前写过很多关于Linux的文章。但经过多年的观察,发现其实对于大部分人,有些东西压根就用不着。用的最多的&…