vue点击pdf文件直接在浏览器中预览文件

好久没有更新文章了,说说为什么会有这篇文章呢,其实是应某个热线评论的要求出的,不过由于最近很长一段时间没打开csdn现在才看到,所以才会导致到现在才出。在这里插入图片描述
先来看看封装完这个预览方法的使用,主打一个方便使用:

id:为文件id
name:为文件名称
ajaxDownLoadFile(id, name)

没错就是这么简单,调用这个函数传入id和name就可以实现

进入正题,我们需要怎么去封装这么个预览pdf的工具呢。

其实我们ajaxDownLoadFile这个方法的功能主要是通过传入id和name然后去实现预览pdf文件,如果不是pdf文件的话,点击后我们应该是有一个下载的功能。

实现我们说的这两个点,主要是下面这两个函数
ajaxDownLoadFile 下载文件
ajaxPrePdf预览文件

    // 下载文件ajaxDownLoadFile(id: string, name?: string) {const strRegex = '(.pdf)$' // 用于验证后缀是否是pdfconst re = new RegExp(strRegex)// 如果文件名存在,同时文件为pdfif (name&& re.test(name.toLowerCase())) {return ajaxPrePdf(id)} else {//不为pdf的文件,直接请求接口下载文件return new Promise((resolve, reject) => {service.get({url: XXX + id,responseType: 'blob'}).then(res => {resolve(res)}).catch(err => reject(err))})}},// 预览文件ajaxPrePdf(id: string) {return new Promise((resolve, reject) => {service.get({url: XXX + id,responseType: 'arraybuffer'}).then(res => {const file = new Blob([res as any], {type: 'application/pdf'})const fileUrl = window.URL.createObjectURL(file)window.open(fileUrl)resolve(res)}).catch(err => reject(err))})}

所以其实真正实现预览文件的功能的其实就是ajaxPrePdf这个函数。

我们通过封装的方式,让这个方法可以在我们整个项目中使用,甚至其他项目需要到pdf预览其他文件下载的功能,我们也可以直接拿过去用。主打一个简单实用。

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

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

相关文章

因为内存溢出,我差点被优化

我们都知道,在写代码的过程中,业务逻辑很大程度上决定了你对业务的理解,但是解决问题,却是你提升比较关键的地方,而我,却差点因为这个内存溢出,把自己给干优化掉。 什么是内存溢出 百度百科是…

《金字塔原理》阅读笔记

我们都希望在思考、沟通交流和解决问题时,重点突出,思路清晰,层次分明。我们评价人时,有一个标准是逻辑思维能力,而逻辑思维能力的标准又是什么?我们指导别人“要逻辑清晰、条理分明”,可怎样才…

Postman应用——接口请求和响应(Get和Post请求)

文章目录 新增Request请求Get请求Post请求 Request请求响应Postman响应界面说明请求响应另存为示例(模板)Postman显示的响应数据清空请求响应数据保存到本地文件 这里只讲用的比较多的Get和Post请求方式,也可以遵循restful api接口规范&#…

服务器时间正常,docker容器日志显示时间少了8小时

问题: 项目中docker部署的项目容器日志时间少了8小时。解决: 在Dockerfile添加下面语句: # 设置时区 ENV TZ"Asia/Shanghai"

4年测试工作经验,跳槽之后面试20余家公司的总结

先说一下自己的个人情况,普通二本计算机专业毕业,懂python,会写脚本,会selenium,会性能,然而离职后到今天都没有收到一份offer!一直在待业中,从离职第一天就开始准备简历&#xff0c…

Linux查看哪些进程占用的系统 buffer/cache 较高 (hcache,lsof)命令

1、什么是buffer/cache ? buffer/cache 其实是作为服务器系统的文件数据缓存使用的,尤其是针对进程对文件存在 read/write 操作的时候,所以当你的服务进程在对文件进行读写的时候,Linux内核为了提高服务的读写速度,则将…

记录一次DLL分析实战

记录一次DLL分析实战 1.VT查看分析报告2.判断文件是否加壳3.查看导入函数4.查看是否有任何其他文件或基于主机的迹象5.使用工具IDA Pro进行字符串分析 1.VT查看分析报告 virustotal 全绿,没有报毒: 可以看到这个dll是32位的: 下面可以看它调…

MyEclipse 用tomcat部署SSM项目后,项目名称和当前项目不一致

MyEclipse 用tomcat部署SSM项目后,项目成功启动,但是访问所有接口报404 从这里可以看到,部署的项目名为accurate_sugar_control_yc_api,但实际我们项目名字应该为accurate_sugar_control_otc_api 解决办法 在本地找到项目的根目…

TQ210-Bootloader-Uboot(LTS)

Bootloader的作用 Bootloader是位于计算机系统启动过程中的程序,它的主要作用是将操作系统从磁盘等外部存储介质加载到计算机内存中,并启动操作系统执行。Bootloader通常包括硬件初始化、自检、异常处理和启动操作系统等功能。它是计算机系统中非常重要…

shiro

shrio笔记 认证 授权 JWT简介&#xff08;Json Web Token) 1、导入依赖库 <!--shiro--><dependency><groupId>org.apache.shiro</groupId><artifactId>shiro-web</artifactId><version>1.5.3</version></dependency>…

【SA8295P 源码分析】97 - QNX AIS Camera 框架介绍 及 Camera 工作流程分析

【SA8295P 源码分析】97 - QNX AIS Camera 框架介绍 及 Camera 工作流程分析 一、QNX AIS Server 框架分析二、QNX Hypervisor / Android GVM 方案介绍三、Camera APP 调用流程分析四、QCarCam 状态转换过程介绍五、Camera 加串-解串 硬件链路分析六、摄像头初始化检测过程介绍…

聊一聊Twitter的雪花算法

什么是Twitter的雪花算法方法&#xff1f; 这是一种在分布式系统中生成唯一ID的解决方案。Twitter在推文、私信、列表等方面使用这种方法。 •ID是唯一且可排序的•ID包含时间信息&#xff08;按日期排序&#xff09;•ID适用于64位无符号整数•仅包含数字值 符号位&#xff08…