当前位置: 首页 > news >正文

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预览其他文件下载的功能,我们也可以直接拿过去用。主打一个简单实用。

相关文章:

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

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

通讯网关软件012——利用CommGate X2OPC实现MS SQL数据写入OPC Server

本文推荐利用CommGate X2OPC实现从MS SQL服务器获取数据并写入OPC Server。CommGate X2OPC是宁波科安网信开发的网关软件,软件可以登录到网信智汇(http://wangxinzhihui.com)下载。 【案例】如下图所示,实现从MS SQL数据库获取数据并写入OPC Server。 【…...

ISE_ChipScope Pro的使用

1.ChipScope Pro Core Inserter 使用流程 在之前以及编译好的流水灯实验上进行学习 ChipScope的使用。 一、新建一个ChipScope 核 点击Next,然后在下一个框中选择 Finish,你就会在项目菜单中看到有XX.cdc核文件。 二、对核文件进行设置 右键“Synthesize – XST” …...

北邮22级信通院数电:Verilog-FPGA(2)modelsim北邮信通专属下载、破解教程

北邮22信通一枚~ 跟随课程进度更新北邮信通院数字系统设计的笔记、代码和文章 持续关注作者 迎接数电实验学习~ 获取更多文章,请访问专栏: 北邮22级信通院数电实验_青山如墨雨如画的博客-CSDN博客 目录 1.下载 2.解压打开 3.modelsim初安装 4.…...

【力扣-每日一题】213. 打家劫舍 II

class Solution { public:int getMax(int n,vector<int> &nums){int a0,bnums[n],c0;for(int in1;i<nums.size()n-1;i){ //sizen-1,为0时&#xff0c;第一个可以偷&#xff0c;最后一个不能偷size-1&#xff1b;n为1时&#xff0c;最后一个可偷&#xff0c;计算…...

【PDF】pdf 学习之路

PDF 文件格式解析 https://www.cnblogs.com/theyangfan/p/17074647.html 权威的文档&#xff1a; 推荐第一个连接&#xff1a; PDF Explained &#xff08;译作《PDF 解析》&#xff09; | PDF-Explained《PDF 解析》https://zxyle.github.io/PDF-Explained/ https://zxyle…...

排序算法二 归并排序和快速排序

目录 归并排序 快速排序 1 挖坑法​编辑 2 Hoare法 快排的优化 快排的非递归方法 七大排序算法复杂度及稳定性分析 归并排序 归并排序是建立在归并操作上的一种有效的排序算法,将以有序的子序列合并,得到完全有序的序列,即先使每个子序列有序,在使子序列段间有序.若将两…...

活动回顾 | 暴雨也无法阻挡的奔赴,2023 Meet TVM · 深圳站完美收官!

2023 Meet TVM 深圳站于 2023 年 9 月 16 日在腾讯大厦成功举办&#xff0c;百余名参与者亲临现场&#xff0c;聆听讲师们的精彩分享。 作者 | xixi 编辑 | 三羊 本文首发于 HyperAI 超神经微信公众平台~ **由 MLC.AI 社区和 HyperAI超神经主办&#xff0c;Openbayes贝式计算…...

JAVA_多线程的实现方式

线程的状态 方式一&#xff1a; public class Thread1 extends Thread {Overridepublic void run() {synchronized (this) {for (int i 0; i < 100; i) {System.out.println(getName() "" i);}}} } Thread1 thread1 new Thread1(); thread1.start(); 方式二…...

Android AndroidStudro版本gradle版本对应

详情网站&#xff1a;Android studio版本对用的gradle版本和插件版本&#xff08;注意事项&#xff09;...

Windows所有的端口及端口对应的程序

Windows所有的端口及端口对应的程序 1.查询Windows的端口 在CMD窗口运行&#xff1a; netstat -ano 结果示例&#xff1a; 活动连接协议 本地地址 外部地址 状态 PIDTCP 0.0.0.0:135 0.0.0.0:0 LISTENING 1156T…...

【Kafka系列】(二)Kafka的基本使用

有的时候博客内容会有变动&#xff0c;首发博客是最新的&#xff0c;其他博客地址可能会未同步,认准https://blog.zysicyj.top 首发博客地址[1] 文章更新计划[2] 系列文章地址[3] Kafka 线上集群部署方案怎么做 操作系统 先说结论&#xff0c;Kafka 部署在 Linux 上要比 Window…...

2023年下半年软考高级系统架构设计师论文指南(收藏)

由于今年下半年软考改为了机考&#xff0c;所以今年是看大家码字的速度了&#xff0c;但是好处还是有的&#xff0c;错了还能删除&#xff0c;之前纸质的 还有点不方便。 1、选择题目 &#xff08;1&#xff09;控制选题的时间。不要浪费太多时间在纠结选题上面。 &#xff…...

数据结构之【动态数组】

1. 线性表 概念&#xff1a;线性表是n个具有相同特性的数据元素的有限序列。 常见的线性表有&#xff1a;数组、链表、栈、队列、字符串…… 特点&#xff1a; 保存在这个结构中的元素都是相同的数据类型。元素之间线性排列&#xff0c;元素之间在逻辑上是连续的。 线性表…...

解答嵌入式和单片机的关系

嵌入式系统是一种特殊的计算机系统&#xff0c;用于特定任务或功能。而单片机则是嵌入式系统的核心部件之一&#xff0c;是一种在单个芯片上集成了处理器、内存、输入输出接口等功能的微控制器。刚刚好我这里有一套单片机保姆式教学&#xff0c;里面有编程教学、问题讲解、语言…...

利用Pycharm将python程序打包为exe文件(亲测可用)

最近做了一个关于py的小项目&#xff0c;对利用Pycharm将python文件打包为exe文件不是很熟悉&#xff0c;故学习记录之。 目录 一、下载pyinstaller库 二、打开Pycharm进行打包&#xff08;不更改图标&#xff09; 三、打开Pycharm进行打包&#xff08;更改图标&#xff09…...

解决Vue设置图片的动态src不生效的问题

一、问题描述 在vue项目中&#xff0c;想要动态设置img的src时&#xff0c;此时发现图片会加载失败。在Vue代码中是这样写的&#xff1a; 在Vue的data中是这样写的&#xff1a; 我的图片在根目录下的static里面&#xff1a; 但是在页面上这个图片却无法加载出来。 二、解决方案…...

企业关键数据采集如何做

数据对于企业的重要性不言而喻&#xff0c;目前又处于大数据时代&#xff0c;企业对于数据的解读将是辅助决策最重要的一环。依据所掌握的数据信息&#xff0c;帮助企业做决策的优化。然而&#xff0c;在企业的关键数据采集并不是一项简单轻松的任务&#xff0c;他需要企业投入…...

抖音SEO矩阵系统源码开发搭建

1. 确定需求和功能&#xff1a;明确系统的主要目标和需要实现的功能&#xff0c;包括关键词研究、短视频制作、外链建设、数据分析、账号设置优化等方面。 2. 设计系统架构&#xff1a;根据需求和功能确定系统的架构&#xff0c;包括前端、后端、数据库等部分的设计&#xff0…...

20230925工作心得

1、如果使用map的时候&#xff0c;担心key重复&#xff0c;覆盖掉值 那么直接加个if/else判断就好了。 如果map.containsKey&#xff0c;那么就把值追加上去&#xff0c;否则就直接put。 2、list的removeAll方法 list.removeAll(list2);//list要removeAll谁,就是看list自己比…...

iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

解锁数据库简洁之道:FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...

AI病理诊断七剑下天山,医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...