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

news2025/4/7 14:09:17

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、浏览器效果:

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

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

相关文章

android,flutter 混合开发,pigeon通信,传参

文章目录 app效果native和flutter通信的基础知识1. 编解码器 一致性和完整性,安全性,性能优化2. android代码3. dart代码 1. 创建flutter_module2.修改 Android 项目的 settings.gradle,添加 Flutter module3. 在 Android app 的 build.gradl…

unity学习47:寻路和导航,unity2022后版本如何使用 Navmesh 和 bake

目录 1 寻路和导航对移动的不同 1.1 基础的移动功能 1.1.1 基础移动 1.1.2 智能导航寻路 1.1.3 智能导航寻路还可以 2 如何实现这个效果? 2.1 通过地图网格的形式 2.1.1 警告信息 the static value has been deprecated的对应搜索 2.1.2 新的navigation ba…

跟着李沐老师学习深度学习(十二)

循环神经网络 序列模型 序列数据 实际中很多数据是有时序结构的 比如:电影的评价随时间变化而变化 拿奖后评分上升,直到奖项被忘记看了很多好电影后,人们的期望变高季节性:贺岁片、暑期档导演、演员的负面报道导致评分变低 核心思想&#…

深入解析NoSQL数据库:从文档存储到图数据库的全场景实践

title: 深入解析NoSQL数据库:从文档存储到图数据库的全场景实践 date: 2025/2/19 updated: 2025/2/19 author: cmdragon excerpt: 通过电商、社交网络、物联网等12个行业场景,结合MongoDB聚合管道、Redis Stream实时处理、Cassandra SSTable存储引擎、Neo4j路径遍历算法等42…

STM32物联网终端实战:从传感器到云端的低功耗设计

STM32物联网终端实战:从传感器到云端的低功耗设计 一、项目背景与挑战分析 1.1 物联网终端典型需求 (示意图说明:传感器数据采集 → 本地处理 → 无线传输 → 云端存储) 在工业物联网场景中,终端设备需满足以下核心需…

[实现Rpc] 客户端划分 | 框架设计 | common类的实现

目录 3. 客户端模块划分 3.1 Network模块 3.2 Protocol模块 3.3 Dispatcher模块 3.4 Requestor模块 3.5 RpcCaller模块 3.6 Publish-Subscribe模块 3.7 Registry-Discovery模块 3.8 Client模块 4. 框架设计 4.1 抽象层 4.2 具象层 4.3 业务层 ⭕4.4 整体设计框架…

【SFRA】笔记

GK_SFRA_INJECT(x) SFRA小信号注入函数,向控制环路注入一个小信号。如下图所示,当前程序,小信号注入是在固定占空比的基础叠加小信号,得到新的占空比,使用该占空比控制环路。 1.2 GK_SFRA_COLLECT(x, y) SFRA数据收集函数,将小信号注入环路后,该函数收集环路的数据,以…

基于Python的Diango旅游数据分析推荐系统设计与实现+毕业论文(15000字)

基于Python的Diango旅游数据分析推荐系系统设计与实现毕业论文指导搭建视频,带爬虫 配套论文1w5字 可定制到某个省份,加40 基于用户的协同过滤算法 有后台管理 2w多数据集 可配套指导搭建视频,加20 旅游数据分析推荐系统采用了Python语…

国自然青年基金|针对罕见神经上皮肿瘤的小样本影像深度数据挖掘关键技术研究|基金申请·25-02-15

小罗碎碎念 今天和大家分享一个国自然青年基金项目,执行年限为2021.01~2023.12,直接费用为24万元。 该项目聚焦罕见神经上皮肿瘤小样本影像深度数据挖掘技术,致力于攻克小样本数据和临床经验缺乏带来的难题。项目围绕影像规范化、…

Linux 网络安全技巧

网络安全是一个非常重要的课题,基本上你运行的服务后台越多,你就可能打开更多的安全漏洞.如果配置的恰当的话,Linux本身是非常安全可靠的,假使在Linux系统中有某个安全缺陷,由于Linux的源码是开放的,有成千上万的志愿者会立刻发现并修补它。本文旨在介绍用来增强你的…

Windows桌面系统管理7:国产操作系统与Linux操作系统

Windows桌面系统管理0:总目录-CSDN博客 Windows桌面系统管理1:计算机硬件组成及组装-CSDN博客 Windows桌面系统管理2:VMware Workstation使用和管理-CSDN博客 Windows桌面系统管理3:Windows 10操作系统部署与使用-CSDN博客 Wi…

百度百舸 DeepSeek 一体机发布,支持昆仑芯 P800 单机 8 卡满血版开箱即用

在私有云环境中成功部署 DeepSeek 满血版并实现性能调优,并不是一件容易的事情。选择合适的 GPU 配置、安装相应的环境、成功部署上线业务、加速推理任务加速、支撑多用户并发 …… 完成业务测试,成功融入生产业务中。 为了帮助企业快速实现 DeepSeek 服…

解锁 AIoT 无限可能,乐鑫邀您共赴 Embedded World 2025

2025 年 3 月 11-13 日,全球规模最大的嵌入式展览会——Embedded World 2025 将在德国纽伦堡盛大开幕。作为物联网和嵌入式技术领域的领先企业,乐鑫信息科技 (688018.SH) 将展示在 AI LLM、HMI、双频 Wi-Fi 6、低功耗 MCU 和 Matter 等领域的最新技术及解…

LlamaFactory可视化模型微调-Deepseek模型微调+CUDA Toolkit+cuDNN安装

LlamaFactory https://llamafactory.readthedocs.io/zh-cn/latest/ 安装 必须保证版本匹配,否则到训练时,找不到gpu cuda。 否则需要重装。下面图片仅供参考。因为cuda12.8装了没法用,重新搞12.6 cudacudnnpytorch12.69.612.6最新&#xf…

【GPT】从GPT1到GPT3

every blog every motto: Although the world is full of suffering, it is full also of the overcoming of it 0. 前言 从GPT1 到GPT3 1. GPT1 论文: https://s3-us-west-2.amazonaws.com/openai-assets/research-covers/language-unsupervised/lan…

openGauss 3.0 数据库在线实训课程18:学习视图管理

前提 我正在参加21天养成好习惯| 第二届openGauss每日一练活动 课程详见:openGauss 3.0.0数据库在线实训课程 学习目标 掌握openGauss视图的管理:创建视图、删除视图、查询视图的信息、修改视图的信息。 课程作业 1.创建表,创建普通视图…

基于flask+vue的租房信息可视化系统

✔️本项目利用 python 网络爬虫抓取某租房网站的租房信息,完成数据清洗和结构化,存储到数据库中,搭建web系统对各个市区的租金、房源信息进行展示,根据各种条件对租金进行预测。 1、数据概览 ​ 将爬取到的数据进行展示&#xff…

手写简易RPC(实践版)

首先了解rpc rpc-远程过程调用,openFeign,Dubbo都可以算作rpc,以微服务来具体说明,就是在本地不需要去发送请求,通过rpc框架,像调用本地方法一样调用其他服务的方法,本质上还是要经过网络&…

mysql学习笔记-多版本并发控制

1、什么是ReadView 在 MVCC机制中,多个事务对同一个行记录进行更新会产生多个历史快照,这些历史快照保存在 Undo Log里。如果一个事务想要查询这个行记录,需要读取哪个版本的行记录呢?这时就需要用到 ReadView 了,它帮我们解决了…

算法日记20:SC72最小生成树(prim朴素算法)

一、题目&#xff1a; 二、题解 2.1&#xff1a;朴素prim的步骤解析 O ( n 2 ) O(n^2) O(n2)(n<1e3) 0、假设&#xff0c;我们现在有这样一个有权图 1、我们随便找一个点&#xff0c;作为起点开始构建最小生成树(一般是1号)&#xff0c;并且存入intree[]状态数组中&#xf…