vue上传文件拿到File,下载文件到本地

news2025/1/18 16:50:32
  • vue中使用upload组件上传pdf文件,拿到File内容后,下载pdf文件到本地
  • vue中根据url下载pdf文件到本地

File文件内容的格式

  • 在这里插入图片描述
    注意:如果使用iviewupload组件上,要获取File文件,需要在before-upload钩子上获取
    async downloadPdf(name, url, file) {
      // 下载file文件
      if (文件是File文件) {
        // 创建一个Blob对象  
        const blob = new Blob([file]);  // file是File内容
        // 创建一个指向Blob的URL  
        const pdfurl = window.URL.createObjectURL(blob);  
        // 创建一个<a>标签并模拟点击它来触发下载  
        const link = document.createElement('a');  
        link.href = pdfurl;  
        link.setAttribute('download', file.name); // 或者你可以设置为其他文件名  
        document.body.appendChild(link);  
        link.click();  
        // 清理  
        window.URL.revokeObjectURL(url);  
        document.body.removeChild(link); 
        return
      }
      // 下载文件url
      const response = await axios({
        url,
        method: 'GET',
        responseType: 'blob'
      })
      const pdfUrl = window.URL.createObjectURL(new Blob([response.data]))
      const link = document.createElement('a')
      link.href = pdfUrl
      link.setAttribute('download', name)
      document.body.appendChild(link)
      link.click()
    },

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

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

相关文章

分治精炼宝库----归并排序应用( ´◔︎ ‸◔︎`)

目录 一.基本概念: 二.归并排序&#xff1a; 三.交易逆序对总数&#xff1a; 四.计算右侧小于当前元素的个数&#xff1a; 五.翻转对&#xff1a; 六.合并k个有序链表&#xff1a; 一.基本概念: &#x1f43b;在计算机科学中&#xff0c;分治法是一种很重要的算法。字面上的…

深入理解数据仓库建模——数据湖、数仓一体化

引言 在当今数据驱动的时代&#xff0c;数据仓库和数据湖的结合已经成为企业数据管理的关键。本文将深入探讨数据湖与数据仓库一体化的概念、优势以及实现方法&#xff0c;并结合实际案例&#xff0c;为大家展示如何有效地实现这一目标。 数据湖与数据仓库的区别 数据湖和数…

服务器数据恢复—raid5热备盘同步失败导致阵列崩溃如何恢复数据?

服务器存储数据恢复环境&故障&#xff1a; 某品牌DS5300存储&#xff0c;包含一个存储机头和多个磁盘柜&#xff0c;组建了多组RAID5磁盘阵列。 某个磁盘柜中的一组RAID5阵列由15块数据盘和1块热备硬盘组建。该磁盘柜中的某块硬盘离线&#xff0c;热备盘自动替换并开始同步…

基于YOLOv5+pyqt5的口罩佩戴检测系统(PyQT页面+YOLOv5模型+数据集)

简介 在各种工作环境和公共场所,确保人们正确佩戴口罩对个人防护和公共卫生至关重要,尤其是在医疗设施、制造业车间和拥挤的公共交通中。为了满足这一需求,我们开发了一种基于YOLOv5目标检测模型的口罩佩戴检测系统。本项目不仅实现了高精度的口罩佩戴检测,还设计了一个可…

STM32上实现spwm调制原理分析

在STM32微控制器上实现SPWM&#xff08;正弦脉宽调制&#xff0c;Sinusoidal Pulse Width Modulation&#xff09;调制的核心是利用高频载波&#xff08;三角波&#xff09;与低频基波&#xff08;正弦波&#xff09;作比较得出。 那么在STM32里三角波和正弦波分别是什么&…

在React中,如何利用React.memo函数对函数组件进行优化?

React.memo 是 React 的一个高阶组件&#xff0c;用于对函数组件进行性能优化。它通过记忆化&#xff08;memoization&#xff09;来避免不必要的重新渲染。当组件的 props 没有变化时&#xff0c;React.memo 可以防止组件重新渲染&#xff0c;从而提高应用的性能。 使用 Reac…

DVWA 靶场 SQL Injection (Blind) 通关解析

前言 DVWA代表Damn Vulnerable Web Application&#xff0c;是一个用于学习和练习Web应用程序漏洞的开源漏洞应用程序。它被设计成一个易于安装和配置的漏洞应用程序&#xff0c;旨在帮助安全专业人员和爱好者了解和熟悉不同类型的Web应用程序漏洞。 DVWA提供了一系列的漏洞场…

VSCode 安装Remote-SSH

1、打开扩展商店安装Remote-SSH 快捷键&#xff1a;CtrlShiftX 2、配置ssh连接 打开命令面板&#xff08;CtrlShiftP&#xff09; 输入"Remote-SSH: Connect to Host"并选择。 输入你的Ubuntu服务器的IP地址或主机名。 3、连接到ubuntu服务器 如果是第一次连接&…

GPTCache:革新大模型缓存,降低成本,提升效率

GPTCache介绍 随着应用程序越来越受欢迎并遇到更高的流量水平,与 LLM API 调用相关的费用可能会变得相当可观。此外,LLM 服务的响应时间可能会很慢,尤其是在处理大量请求时。GPTCache是一个致力于构建用于存储 LLM 响应的语义缓存的项目。 项目架构 数字人助力传统客服 1…

Inpaint软件最新版下载【安装详细图文教程】

​根据使用者情况表明在今天的数字时代&#xff0c;我们经常会遇到需要处理图形的情况&#xff0c;然而&#xff0c;当我们遇到水印在图形上&#xff0c;我们就需要寻找一个有效的方式来去除它&#xff0c;Inpaint软件就是一个非常实用的工具&#xff0c;它能够帮助我们去除水印…

数据结构小知识2:树

一、什么是树 数据结构中的树是一种非常重要的非线性数据结构。它由节点&#xff08;Node&#xff09;和边&#xff08;Edge&#xff09;组成&#xff0c;用于表示具有层次关系的数据。 1.1、树的基本概念 节点&#xff08;Node&#xff09;&#xff1a; 树的基本单位&…

修改yarn、npm、pnpm为国内镜像源

国内由于网络的原因&#xff0c;使用官方的npm、yarn、pnpm访问下载依赖库会很慢&#xff0c;有时候还会出现无法访问的情况&#xff0c;这时候就需要我们给npm、yarn、pnpm换一个国内的镜像源的&#xff0c;一般的我们可以将镜像换成淘宝的源&#xff0c;由于平时比较常用到的…

《珊瑚岛》是一款什么类型的游戏 苹果电脑如何玩到《珊瑚岛》

在众多电子游戏中&#xff0c;有些游戏因其独特的游戏体验和丰富的内容而脱颖而出&#xff0c;《珊瑚岛》便是其中之一。在游戏中你将离开宝京前往珊瑚岛&#xff0c;种植农作物、饲养动物、和岛民成为朋友。您不仅可以振兴该岛小镇&#xff0c;还可以保护和修复周围的珊瑚礁。…

Part 8.2 最短路问题

很多题目都可以转化为最短路的模型。因此&#xff0c;掌握最短路算法非常重要。 >最短路模板< 【模板】全源最短路&#xff08;Johnson&#xff09; 题目描述 给定一个包含 n n n 个结点和 m m m 条带权边的有向图&#xff0c;求所有点对间的最短路径长度&#xff…

流水账里的贷款密码:如何打造银行眼中的“好流水”

说到贷款&#xff0c;很多人可能都遇到过这样的困惑&#xff1a;明明觉得自己条件不错&#xff0c;为啥银行就是不给批呢&#xff1f;其实&#xff0c;银行在审批贷款时&#xff0c;除了看你的征信记录、收入证明这些基础材料外&#xff0c;还有一个很重要的参考指标&#xff0…

LinkedHashMap详解

目录 LinkedHashMap详解1、LinkedHashMap的继承体系2、LinkedHashMap的特性介绍和代码示例①、特性②、适用场景使用LinkedHashMap 实现最简单的 LRU缓存 3、LinkedHashMap的构造函数4、LinkedHashMap是如何存储元素的&#xff0c;底层数据结构是什么&#xff1f;LinkedHashMap…

JAVA复习3

目录 19. 下列关于 do…while 语句和 while 语句的叙述中错误的是&#xff08; C &#xff09; 20. 若有定义 int a9, b6; System.out.println(a > b) 的结果是&#xff08; D &#xff09; 21. 关于接口和抽象类&#xff0c;下列说法正确的是&#xff08;A&#xff09; …

C++并发之协程实例(三)(co_await)

目录 1 协程2 实例3 运行 1 协程 协程(Coroutines)是一个可以挂起执行以便稍后恢复的函数。协程是无堆栈的&#xff1a;它们通过返回到调用方来暂停执行&#xff0c;并且恢复执行所需的数据与堆栈分开存储。这允许异步执行的顺序代码&#xff08;例如&#xff0c;在没有显式回调…

Interleaving Retrieval with Chain-of-Thought Reasoning for ... 论文阅读

Interleaving Retrieval with Chain-of-Thought Reasoning for Knowledge-Intensive Multi-Step Questions 论文阅读 文章目录 Interleaving Retrieval with Chain-of-Thought Reasoning for Knowledge-Intensive Multi-Step Questions 论文阅读 Abstract介绍相关工作开放域QA提…

Python+Pytest+Yaml+Request+Allure接口自动化测试框架详解

PythonPytestYamlAllure整体框架目录&#xff08;源代码请等下篇&#xff09; 框架详解 common:公共方法包 –get_path.py:获取文件路径方法 –logger_util.py:输出日志方法 –parameters_until.py&#xff1a;传参方式方法封装 –requests_util.py&#xff1a;请求方式方法封…