Vue 实现通过URL浏览器本地下载 PDF 和 图片

1、代码实现如下:

根据自己场景判断 PDF 和 图片,下载功能可按下面代码逻辑执行

const downloadFile = async (item: any) => {
    try {
        let blobUrl: any;
        // PDF本地下载
        if (item.format === 'pdf') {
            const response = await fetch(item.url); // URL传递进入
            if (!response.ok) {
                throw new Error('本地下载失败!');
            }
            const blob = await response.blob();
            blobUrl = URL.createObjectURL(blob); 
        } else { // 图片下载
            const imageUrl = item.url;
            const response = await fetch(imageUrl); // URL传递进入

            if (!response.ok) {
                throw new Error(`本地下载失败!`);
            }
            const blob = await response.blob();
            blobUrl = URL.createObjectURL(blob);
        }
        //执行下载逻辑
        if (blobUrl) {
            const link = document.createElement("a"); // 创建a标签
            link.href = blobUrl; // 下载链接
            link.download = item.name; // 下载的文件名
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link); // 下载完成后移除a标签
            URL.revokeObjectURL(blobUrl); // 释放URL对象
        }
    } catch {
        proxy.$message.error('本地下载失败!');
    }
};

2、浏览器效果:

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Microsoft 365 Copilot中使用人数最多的是哪些应用

今天在浏览Microsoft 365 admin center时发现,copilot会自动整理过去30天内所有用户使用copilot的概况: 直接把这个图丢给copilot让它去分析,结果如下: 总用户情况 总用户数在各应用中均为 561 人,说明此次统计的样本…

Spring Boot (maven)分页4.0.1版本 专业版- 改

前言: 通过实践而发现真理,又通过实践而证实真理和发展真理。从感性认识而能动地发展到理性认识,又从理性认识而能动地指导革命实践,改造主观世界和客观世界。实践、认识、再实践、再认识,这种形式,循环往…

装修流程图: 装修前准备 → 设计阶段 → 施工阶段 → 安装阶段 → 收尾阶段 → 入住

文章目录 引言I 毛坯房装修的全流程**1. 装修前准备****1.1 确定装修预算****1.2 选择装修方式****1.3 选择装修公司****1.4 办理装修手续****2. 设计阶段****2.1 量房****2.2 设计方案****2.3 确认方案****3. 施工阶段****3.1 主体拆改****3.2 水电改造****3.3 防水工程****3.…

若依-@Excel新增注解numberFormat

Excel注解中原本的scale会四舍五入小数,导致进度丢失 想要的效果 显示的时候保留两个小数真正的数值是保留之前的数值 还原过程 若以中有一個專門的工具类,用来处理excel的 找到EXCEL导出方法exportExcel()找到writeSheet,写表格的方法找到填充数据的方法…

鸿蒙5.0实战案例:基于自定义注解和代码生成实现路由框架

往期推文全新看点(文中附带全新鸿蒙5.0全栈学习笔录) ✏️ 鸿蒙(HarmonyOS)北向开发知识点记录~ ✏️ 鸿蒙(OpenHarmony)南向开发保姆级知识点汇总~ ✏️ 鸿蒙应用开发与鸿蒙系统开发哪个更有前景&#…

让浏览器AI起来:基于大模型Agent的浏览器自动化工具

最近有个非常火的项目,利用大模型Agent驱动浏览器完成各种操作,如网页搜索、爬虫分析、机票酒店预定、股票监控等,号称全面替代所有在浏览器上的操作,试用方式还是比较简单的,以下将进行简单介绍。 快速开始 通过pip安装: pip install browser-use安装web自动化框架:…

模电知识点总结(6)

1.选取频率高于1000Hz的信号时,可选用高通滤波器;抑制50Hz的交流干扰时,可选用带阻滤波器如果希望抑制500Hz以下的信号,可选用高通滤波器。 2.有用信号频率高于1000Hz,可选用高通滤波器;希望抑制50Hz的交流…

MyBatis:动态SQL高级标签使用方法指南

一、引言 目前互联网大厂在搭建后端Java服务时,常使用Springboot搭配Mybatis/Mybatis-plus的框架。Mybatis/Mybatis-plus之所以能成为当前国内主流的持久层框架,与其本身的优点有关:支持定制动态 SQL、存储过程及高级映射,简化数…

快速入门——Axios网络请求

学习自哔哩哔哩上的“刘老师教编程”,具体学习的网站为:11.Axios网络请求_哔哩哔哩_bilibili,以下是看课后做的笔记,仅供参考。 第一节Axios的使用 第二节与Vue整合 第三节跨域 第一节Axios的使用 在实际项目开发中&#xff0…

Typora的Github主题美化

对Typora的Github主题进行一些自己喜欢的修改,主要包括:字体、代码块、表格样式 美化前: 美化后: 字体更换 之前便看上了「中文网字计划」的「朱雀仿宋」字体,于是一直想更换字体,奈何自己拖延症作祟&#…

DeepSeek 助力 Vue 开发:打造丝滑的 键盘快捷键(Keyboard Shortcuts)

前言:哈喽,大家好,今天给大家分享一篇文章!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏关注哦 💕 目录 Deep…

[深度学习][python]yolov12+bytetrack+pyqt5实现目标追踪

【算法介绍】 实时目标检测因其低延迟特性而持续受到广泛关注,具有重要的实际应用价值[4, 17, 24, 28]。其中,YOLO系列[3, 24, 28, 29, 32, 45-47, 53, 57, 58]通过有效平衡延迟与精度,在该领域占据主导地位。尽管YOLO的改进多集中在损失函数…

Python大数据可视化:基于大数据技术的共享单车数据分析与辅助管理系统_flask+hadoop+spider

开发语言:Python框架:flaskPython版本:python3.7.7数据库:mysql 5.7数据库工具:Navicat11开发软件:PyCharm 系统展示 管理员登录 管理员功能界面 场地信息界面 单车信息界面 归还信息界面 共享单车界面 系…

ssm-day06 ssm整合

从springMVC总结再回顾一下 60节 整合就是应用框架,并且把这个框架放到IOC容器中 web容器:装springMVC和controller相关的web组件 root容器:装业务和持久层相关的组件 子容器可以引用父容器中的组件,父容器不能调子容器 一个容器…

MATLAB基础学习相关知识

MATLAB安装参考:抖音-记录美好生活 MATLAB基础知识学习参考:【1小时Matlab速成教程-哔哩哔哩】 https://b23.tv/CnvHtO3 第1部分:变量定义和基本运算 生成矩阵: % 生成矩阵% 直接法% ,表示行 ;表示列 a [1,2,3;4,5,6;7,8,9];%…

Windows - 通过ssh打开带有图形界面的程序 - 一种通过计划任务的曲折实现方式

Windows(奇思妙想) - 通过ssh打开带有图形界面的程序 - 一种通过计划任务的曲折实现方式 前言 Windows启用OpenSSH客户端后就可以通过SSH的方式访问Windows了。但是通过SSH启动的程序: 无法显示图形界面会随着SSH进程的结束而结束 于是想到了一种通过执行“计划…

WPS接入deepseek-OfficeAI助手插件下载

功能简介 OfficeAI 助手 是一款免费的智能AI办公工具软件,专为 Microsoft Office 和 WPS 用户打造。 无论你是在寻找如何输入“打勾(√)符号”的方法,还是想知道“怎么在插入表格前添加文字”,或者“该用哪个公式”&a…

【JavaEE进阶】Spring MVC(4)-图书管理系统案例

欢迎关注个人主页:逸狼 创造不易,可以点点赞吗 如有错误,欢迎指出~ 图书管理系统 创建书籍类BookInfo import lombok.Data;import java.math.BigDecimal;Data //这个类基本上是和数据库对应起来的 public class BookInfo {private Integer id…

路由器的WAN口和LAN口有什么区别?

今时今日,移动终端盛行的时代,WIFI可以说是家家户户都有使用到的网络接入方式。那么路由器当然也就是家家户户都不可或缺的设备了。而路由器上的两个实现网络连接的基础接口 ——WAN 口和 LAN 口,到底有什么区别?它们的功能和作用…

AI客服-接入deepseek大模型到微信(本地部署deepseek集成微信自动收发消息)

1.本地部署 1.1 ollama Ollama软件通过其高度优化的推理引擎和先进的内存管理机制,显著提升了大型语言模型在本地设备上的运行效率。其核心采用了量化技术(Quantization)以降低模型的计算复杂度和存储需求,同时结合张量并行计算&…