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.xdnf.cn/news/141575.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Purple-Pi-OH Linux SDK编译手册

一、 SDK下载 1.1 源码下载 在官网下载Purple-Pi-OH的的相关资料以及Linux SDK: 链接:Purple Pi OH-深圳触觉智能科技有限公司 1.2 源码解压 由于SDK打包后体积较大,我们在上传到百度云盘前把SDK包按照4GB大小分割了,因此下载…

基于物联网的农村地区智能微电网系统(Simulink)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

肖sir__mysql中数据库后端无法展示

mysql中数据库后端无法展示: 错误现象 解决方法: mysql中数据库后端无法展示:my.cnf (5,7数据库) 在 mysql 配置文件中加入: sql_modeNO_ENGINE_SUBSTITUTION,STRICT_TRANS_TABLES 或者重启数据库

Mac配置iTerm样式终端

一、MacOs系统 MacOs中终端使用iTerm2 1. 配置oh-my-zsh oh my zsh 的地址: https//github.com/ohmyzsh/ohmyzsh 插件存放位置:~/.oh-my-zsh/plugins 下载常用的插件 git clone http://github.com/zsh-users/zsh-syntax-highlighting.git 修改配…

STC15F104W控制3个74HC595芯片输出数码管显示

一、74HC595脚位图及说明 管脚说明: 14脚:DS(SER),串行数据输入引脚 13脚:OE,输出使能控制脚,它是低电才使能输出,所以接GND 12脚:RCK(STCP&…

基于SpringBoot的可以做毕设或者课设的实时聊天系统(仿微信)

技术栈 前后端分离前端使用: Vue Element后端使用: SpringBoot Mysql8.0 Mybatis WebSocket 功能 登录和注册页 登录 和 注册 修改个人信息页 修改个人信息 消息列表页 展示最近半年的聊天信息,删除聊天记录 搜索好友和群页 搜索JJ号来找到 群/好友 好友信息详情页…

【app篇】写个简单的BLE调试app,练练手,同时为后续调试ESP32 BLE做个支持

忘记过去,超越自己 ❤️ 博客主页 单片机菜鸟哥,一个野生非专业硬件IOT爱好者 ❤️❤️ 本篇创建记录 2023-09-25 ❤️❤️ 本篇更新记录 2023-09-25 ❤️🎉 欢迎关注 🔎点赞 👍收藏 ⭐️留言📝&#x1f64…

前端VUE---JS实现数据的模糊搜索

实现背景 因为后端实现人员列表返回&#xff0c;每次返回的数据量在100以内&#xff0c;要求前端自己进行模糊搜索 页面实现 因为是实时更新数据的&#xff0c;就不需要搜索和重置按钮了 代码 HTML <el-dialogtitle"团队人员详情":visible.sync"centerDi…

odoo16 取消“系统各功能状态日报”的邮件

odoo16默认情况下每周都会发送一个“系统各功能状态日报”的邮件&#xff0c;而且是所有人都发&#xff0c; 这个功能在哪配置呢&#xff1f; 今天研究了一下&#xff0c; 线索是“系统各功能状态日报”&#xff0c;先全文检索吧 #. module: digest #: model:digest.digest,na…

视频如何压缩?视频压缩到100M以内这样做

在日常生活中&#xff0c;我们常常需要处理各种各样的视频文件&#xff0c;但往往视频的大小会给我们的存储和传输带来困扰。那么&#xff0c;如何有效地压缩视频呢&#xff1f;下面就给大家分享三种解决方法&#xff0c;一起来看看吧。 方法一&#xff1a;嗨格式压缩大师 这是…

【flutter】架构之商城main入口

架构之商城main入口 前言一、项目模块的划分二、入口main的配置三、配置文件怎么做总结 前言 本栏目我们将完成一个商城项目的架构搭建&#xff0c;并完善中间的所有功能&#xff0c;总页面大概200个&#xff0c;如果你能看完整个栏目&#xff0c;你肯定能独立完成flutter 项目…

全流程ARCGIS Pro技术应用教程

详情点击公众号链接&#xff1a;全流程ARCGIS Pro技术应用教程 前沿 GIS是利用电子计算机及其外部设备&#xff0c;采集、存储、分析和描述整个或部分地球表面与空间信息系统。简单地讲&#xff0c;它是在一定的地域内&#xff0c;将地理空间信息和 一些与该地域地理信息相关…

基于springboot+vue的大学生竞赛交流系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…

【内网穿透】在Ubuntu搭建Web小游戏网站,并将其发布到公网访问

目录 前言 1. 本地环境服务搭建 2. 局域网测试访问 3. 内网穿透 3.1 ubuntu本地安装cpolar 3.2 创建隧道 3.3 测试公网访问 4. 配置固定二级子域名 4.1 保留一个二级子域名 4.2 配置二级子域名 4.3 测试访问公网固定二级子域名 前言 网&#xff1a;我们通常说的是互…

从技术创新到应用实践,百度智能云发起大模型平台应用开发挑战赛!

大模型已经成为未来技术发展方向的重大变革&#xff0c;热度之下更需去虚向实&#xff0c;让技术走进产业场景。在这样的背景下&#xff0c;百度智能云于近期发起了“百度智能云千帆大模型平台应用开发挑战赛”。 挖掘大模型落地应用 千帆大模型平台应用开发挑战赛启动 在不久…

适合新手自学的网络安全基础技能“蓝宝书”:《CTF那些事儿》

CTF比赛是快速提升网络安全实战技能的重要途径&#xff0c;已成为各个行业选拔网络安全人才的通用方法。但是&#xff0c;本书作者在从事CTF培训的过程中&#xff0c;发现存在几个突出的问题&#xff1a; 1&#xff09;线下CTF比赛培训中存在严重的“最后一公里”问题&#xf…

Unity中关于多线程的一些事

一.线程中不允许调用unity组件api 解决方法&#xff1a;可以使用bool值变化并且在update中监测bool值变化来调用关于unity组件的API. 二.打印并且将信息输出到list列表中 多线程可能同时输出多条信息。输出字符串可以放入Queue队列中。队列可以被多线程插入。 三.启用socke…

用flex实现grid布局

1. css代码 .flexColumn(columns, gutterSize) {display: flex;flex-flow: row wrap;margin: calc(gutterSize / -2);> div {flex: 0 0 calc(100% / columns);padding: calc(gutterSize / 2);box-sizing: border-box;} }2.用法 .grid-show-item3 {width: 100%;display: fl…

Linux环境下使用SVN快速访问资料库?试试使用cpolar端口映射

文章目录 前言1. Ubuntu安装SVN服务2. 修改配置文件2.1 修改svnserve.conf文件2.2 修改passwd文件2.3 修改authz文件 3. 启动svn服务4. 内网穿透4.1 安装cpolar内网穿透4.2 创建隧道映射本地端口 5. 测试公网访问6. 配置固定公网TCP端口地址6.1 保留一个固定的公网TCP端口地址6…

电脑C盘爆红怎么办?(小白篇)

文章目录 前言&#xff1a;1、清理临时和系统文件2、更改电脑默认软件安装位置3、微信、QQ文件存储路径放在其它盘4、卸载一些不常用的软件彩蛋 前言&#xff1a; C盘作为电脑的系统盘&#xff0c;如果出现爆满或者剩余空间很小整个C盘变红&#xff0c;这样会导致电脑系统运行…