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

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

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

相关文章

计算机网络基础杂谈(局域网、ip、子网掩码、网关、DNS)

目录 1. 简单局域网的构成 2. IP 地址 3. 子网掩码 4. IP地址详解自定义IP 5. IP 地址详解 6. 网关 7. DNS 域名解析 8. ping 1. 简单局域网的构成 交换机是组建局域网最重要的设备,换句话说,没有交换机就没法搭建局域网 交换机不能让局域网连…

Thor: 统一AI模型网关的革新之选

项目价值 Thor(雷神托尔)作为一个强大的AI模型管理网关,解决了当前AI领域一个关键痛点:不同AI服务商的API格式各异,集成成本高。Thor通过将各种AI模型的独特格式统一转换为OpenAI格式,显著降低了开发者的使用门槛和维护成本。 核…

25年2月通信基础知识补充:多普勒频移与多普勒扩展、3GPP TDL信道模型

看文献过程中不断发现有太多不懂的基础知识,故长期更新这类blog不断补充在这过程中学到的知识。由于这些内容与我的研究方向并不一定强相关,故记录不会很深入请见谅。 【通信基础知识补充7】25年2月通信基础知识补充1 一、多普勒频移与多普勒扩展傻傻分不…

【Python】Python入门——笔记合集

哈哈 00、环境搭建 学习Python,首先需要搭建一个本地开发环境,或是使用线上开发环境(各类练习网站),这篇博客里主要记录了本地开发环境的配置方法。内容包括python解释器的安装以及pycharm的安装、汉化等。 博客地…

为什么mvcc中?m_ids 列表并不等同于 min_trx_id 和 max_trx_id 之间的所有事务 ID

首先我们要明确 m_ids 表示创建 ReadView 时,系统中所有活跃(未提交)事务的事务 ID 列表。 仅包含当前未提交的事务,与事务 ID 的数值范围无关。 min_trx_id 是 m_ids 中的最小值。若 m_ids 为空,则 min_trx_id 等于…

使用 Spark NLP 实现中文实体抽取与关系提取

在自然语言处理(NLP)领域,实体抽取和关系提取是两个重要的任务。实体抽取用于从文本中识别出具有特定意义的实体(如人名、地名、组织名等),而关系提取则用于识别实体之间的关系。本文将通过一个基于 Apache Spark 和 Spark NLP 的示例,展示如何实现中文文本的实体抽取和…

FPGA开发要学些什么?如何快速入门?

随着FPGA行业的不断发展,政策的加持和投入的研发,近两年FPGA行业的薪资也是水涨船高,一些人转行后拿到了薪资30W,甚至有一些能力强的人可以拿到60W,看到这里想必不少人表示很心动,但又不知道怎么转&#xf…

使用Python和正则表达式爬取网页中的URL数据

在数据抓取和网络爬虫开发中,提取网页中的URL是一个常见的需求。无论是用于构建网站地图、分析链接结构,还是进行内容聚合,能够高效地从HTML文档中提取URL都是一个重要的技能。Python作为一种强大的编程语言,结合其正则表达式模块…

人工智能之目标追踪DeepSort源码解读(yolov5目标检测,代价矩阵,余弦相似度,马氏距离,匹配与预测更新)

要想做好目标追踪,须做好目标检测,所以这里就是基于yolov5检测基础上进行DeepSort,叫它为Yolov5_DeepSort。整体思路是先检测再追踪,基于检测结果进行预测与匹配。 一.参数与演示 这里用到的是coco预训练人的数据集: 二.针对检测结果初始化track 对每一帧数据都输出…

C++蓝桥杯基础篇(四)

片头 嗨~小伙伴们,大家好!今天我们来学习C蓝桥杯基础篇(四),继续练习相关习题。准备好了吗?咱们开始咯~ 题目1 连续整数相加 思路分析: 这道题,我们可以把从键盘中读取n写在while循…

YOLOv12从入门到入土(含结构图)

论文链接:https://arxiv.org/abs/2502.12524 代码链接:https://github.com/sunsmarterjie/yolov12 文章摘要: 长期以来,增强YOLO框架的网络架构一直至关重要,但一直专注于基于cnn的改进,尽管注意力机制在建…

SpringSecurity基于配置方法控制访问权限:MVC匹配器、Ant匹配器

Spring Security 是一个功能强大且高度可定制的身份验证和访问控制框架。在 Spring Security 中,可以通过配置方法来控制访问权限。认证是实现授权的前提和基础,在执行授权操作前需要明确目标用户,只有明确目标用户才能明确它所具备的角色和权…

【iOS】SwiftUI状态管理

State ObservedObject StateObject 的使用 import SwiftUIclass CountModel: ObservableObject {Published var count: Int 0 // 通过 Published 标记的变量会触发视图更新init() {print("TimerModel initialized at \(count)")} }struct ContentView: View {State…

跟着 Lua 5.1 官方参考文档学习 Lua (3)

文章目录 2.5 – Expressions2.5.1 – Arithmetic Operators2.5.2 – Relational Operators2.5.3 – Logical Operators2.5.4 – Concatenation2.5.5 – The Length Operator2.5.6 – Precedence2.5.7 – Table Constructors2.5.8 – Function Calls2.5.9 – Function Definiti…

(LLaMa Factory)大模型训练方法--监督微调(Qwen2-0.5B)

1、准备训练数据:SFT 的数据格式有多种,例如:Alpaca格式、OpenAI格式等。 #其中Alpaca格式如下:[{"instruction":"human instruction (required)","input":"human input (optional)",&qu…

Sojson高级加密技术科普

1. 引言 什么是Sojson? Sojson是一款用于JavaScript代码加密与混淆的工具,它能够有效保护前端代码的知识产权,避免开发者的心血被随意窃取。 为什么需要代码加密? 在当今的互联网环境下,代码被轻易复制、篡改或逆向…

自制简单的图片查看器(python)

图片格式:支持常见的图片格式(JPG、PNG、BMP、GIF)。 import os import tkinter as tk from tkinter import filedialog, messagebox from PIL import Image, ImageTkclass ImageViewer:def __init__(self, root):self.root rootself.root.…

【核心算法篇十三】《DeepSeek自监督学习:图像补全预训练方案》

引言:为什么自监督学习成为AI新宠? 在传统监督学习需要海量标注数据的困境下,自监督学习(Self-Supervised Learning)凭借无需人工标注的特性异军突起。想象一下,如果AI能像人类一样通过观察世界自我学习——这正是DeepSeek图像补全方案的技术哲学。根据,自监督学习通过…

Nginx下proxy_redirect的三种配置方式

Nginx中的proxy_redirect指令,用于修改代理服务器接收到的后端服务器响应中的重定向URL。在代理环境中,若后端返回的重定向URL不符合客户端需求,就用它调整。 语法 proxy_redirect default; proxy_redirect redirect replacement; proxy_…

使用DeepSeek+本地知识库,尝试从0到1搭建高度定制化工作流(自动化篇)

7.5. 配图生成 目的:由于小红书发布文章要求图文格式,因此在生成文案的基础上,我们还需要生成图文搭配文案进行发布。 原实现思路: 起初我打算使用deepseek的文生图模型Janus进行本地部署生成,参考博客:De…