前端文件下载的多种方式

news2024/11/14 15:32:21

前端文件下载的多种方式。

  • 前言
  • a标签下载
    • a标签常用属性介绍- target,href,download。
  • window.location.href下载
  • window.open下载
  • iframe 下载
  • 动态生成a标签下载
    • 文件url下载
    • 文件流下载
    • blob文件流转换常用类型
  • 使用 streamSaver 看实时下载进度

前言

如果我们要下载一些浏览器读不懂的文件,我们可以使用 < a >标签在新窗口打开链接,也可以使用 windows.open(‘url’) 的方式打开新窗口进行下载。
但如果这个文件浏览器是读得懂的,比如 .txt 文件,那浏览器就不会执行下载,而是会直接在页面中把文件内容展示出来。
根据这个特性,我们可以根据需求自由选择如下方案进行下载

a标签下载

<a href="链接" download="链接名称"> //点击下载

a标签常用属性介绍- target,href,download。

  • target属性
    在这里插入图片描述
  • href属性

如果 < a > 标签没有 href 属性,它只是一个超链接的占位符。

<a href="http://baidu.com">在当前窗口打开百度链接</a>
<a href="http://baidu.com" target="_blank">在新窗口打开百度链接</a>
<a href="#">网页返回顶部</a>
<a href="#miss">锚点跳转——本页面跳转</a>
  • download 属性

download 规定当用户单击超链接时将下载目标(href 属性中规定的文件)。
download 的值为文件下载后的新名称。允许使用任何值,浏览器会自动检测正确的文件扩展名并将其添加到文件中(例如 .img、.pdf、.txt、.html 等)
网络图片download无效,点击为预览

<a href="图片链接" download="图片名称"> //点击下载图片
<a href="pdf链接" download="1.pdf" target="_blank">pdf下载</a> //下载pdf,浏览器不自动打开 记得让后台给.pdf加个content-type头:application/octet-strea

window.location.href下载

// 通用下载方法
export function download(url) {
window.location.href = url
}

直接访问可能会覆盖当前页面地址,影响用户体验。
只有.pdf和图片可以实现跳转另一个新窗口进行预览,其他格式是下载

window.open下载

export function download(url) {
      window.open(url);
    },

这个方法只能将指定路径的资源加载到浏览器里面,如果文件不能被浏览器浏览,那就会被浏览器下载到本地。反之,如果下载一个txt文本,用该方法会直接预览txt文件

iframe 下载

export function download(url) {
        window.open("about:blank");
        const iframe = document.createElement("iframe");
        iframe.src = url;
        iframe.style.width = "100%";
        iframe.style.height = "100vh";
        iframe.style.margin = "0";
        iframe.style.padding = "0";
        iframe.style.overflow = "hidden";
        iframe.style.border = "none";
        win.document.body.style.margin = "0";
        win.document.body.appendChild(iframe);
}

动态生成a标签下载

文件url下载

export function download(url) {
  const link = document.createElement('a');
  link.style.display = 'none';
  link.download ="文件名";
  link.href = url;
  link.click();
  document.body.removeChild(link);
}

文件流下载

// 用fetch发送请求 对请求回来的二进制文件流进行处理 如果返回的就是文件流 则直接进行fetch后的步骤则可
export function download(url) {
       fetch(url)
          .then((response) => response.blob()) // 获取文件数据流
          .then((blob) => {
            const url = window.URL.createObjectURL(new Blob([blob], {
                    type: "根据文件类型写不同的type",
                  })); // 生成文件在浏览器中的链接
            const a = document.createElement("a");
            a.href = url;
            a.download = "文件名"; // 文件名 如果是视频格式 需要加上后缀名 “.flv /.mp4”
            a.style.display = "none";
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url); // 清除文件链接
          })
          .catch(console.error);
          }

如果遇到下载 txt、jpg 等文件时出现直接打开文件而不是下载文件的情况时,可以在下载地址即 url 后拼接 ‘?response-content-type=application/octet-stream’ 即可

blob文件流转换常用类型

后缀MIME Type
.docapplication/msword
.docxapplication/vnd.openxmlformats-officedocument.wordprocessingml.document
.xlsapplication/vnd.ms-excel
.xlsxapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.pptapplication/vnd.ms-powerpoint
.pptxapplication/vnd.openxmlformats-officedocument.presentationml.presentation
.flvflv-application/octet-stream
.pdfapplication/pdf
.pngimage/png
.gifimage/gif
.jpeg .jpgimage/jpeg
.mp3audio/mpeg
.mp4video/mpeg4
.htmltext/html
.csstext/css
.jstext/javascript
.jsonapplication/json
.zipapplication/zip

使用 streamSaver 看实时下载进度

StreamSaver源码地址

npm i streamsaver
import streamSaver from "streamsaver"

使用 StreamSaver.js 下载文件的大概流程是这样的(为了方便理解,我用一些不专业的术语进行描述)

  • 创建一个文件,该文件支持写入操作。streamSaver.createWriteStream(‘文件名.后缀’)。
  • 使用 fetch 方法访问文件的url,将内容一点点的放到 StreamSaver 创建的文件里。
  • 监听文件内容是否读取完整,读取完就执行“保存并关闭文件”的操作。
      fetch(url).then((res) => {
              const fileStream = streamSaver.createWriteStream(
                 "历史视频.flv",//文件名
                {
                  size: res.headers.get("content-length"),
                }
              );
              const readableStream = res.body;
              if (window.WritableStream && readableStream.pipeTo) {
                return readableStream.pipeTo(fileStream).then(() => {});
              }
              window.writer = fileStream.getWriter();
              const reader = res.body.getReader();
              const pump = () =>
                reader
                  .read()
                  .then((res) =>
                    res.done ? window.writer.close() : window.writer.write(res.value).then(pump)
                  );
              pump();
            });

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

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

相关文章

【类与对象(中)】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言 1.类的6个默认成员函数 2. 构造函数 2.1 概念 2.2 特性 3.析构函数 3.1 概念 3.2 特性 4. 拷贝构造函数 4.1 概念 4.2 特征 引用 常引用 5.赋值运算符重载 5.1…

SpringCloud--Gateway解析

一、Gateway简介 Gateway是Spring Cloud官方推出的第二代微服务网关&#xff0c;它旨在提供统一的路由方式以及为微服务应用提供强大的负载均衡能力。与第一代Spring Cloud Netflix Zuul相比&#xff0c;Spring Cloud Gateway在性能、可扩展性、易用性等方面都有了显著的提升。…

Python深入理解collections模块:常见数据结构及应用场景分析

Python深入理解collections模块&#xff1a;常见数据结构及应用场景分析 介绍collections模块的常见数据结构代码演示defaultdictCounterOrderedDict 介绍 在Python编程中&#xff0c;经常需要使用一些内置的数据结构&#xff0c;如列表、字典等。然而&#xff0c;在某些特定的…

uniapp 本地存储的方式

1. uniapp 本地存储的方式 在uniapp开发中&#xff0c;本地存储是一个常见的需求。本地存储可以帮助我们在客户端保存和管理数据&#xff0c;以便在应用程序中进行持久化存储。本文将介绍uniapp中本地存储的几种方式&#xff0c;以及相关的代码示例。 1.1. 介绍 在移动应用开发…

OSPF综合实验报告

实验要求&#xff1a; 实验预览图&#xff1a; 实验分析&#xff1a; 1、对R4仅仅配置端口IP和环回&#xff0c;使用共有IP 2、对R3-R7配置MGRE环境&#xff0c;以R3为hub&#xff0c;R5、R7、R6为spoke。 3、对172.16.0.0/16 IP进行子网划分&#xff0c;使得全网IP基于该网…

数据结构第十天(排序算法总结)

目录 前言 常数时间复杂度&#xff1a;O(1) 线性时间复杂度&#xff1a;O(n) 线性对数时间复杂度&#xff1a;O(n log n) 平方时间复杂度&#xff1a;O(n^2) 对数时间复杂度&#xff1a;O(log n) 前言 排序算法的学习可以告一段落了。但算法的学习永不停止。 今天&…

用python编写爬虫,爬取二手车信息+实验报告

题目 报告要求 工程报告链接放在这里 https://download.csdn.net/download/Samature/88805518使用 1.安装jupyter notebook 2.用jupyter notebook打开工程里的ipynb文件&#xff0c;再run all就行 注意事项 可能遇到的bug 暂无&#xff0c;有的话私信我

通过dockerfile 生成自定义nginx镜像

通过dockerfile生成自定义nginx镜像 &#xff01;&#xff01;&#xff01;docker 必须在linux环境下才能进行如果你是window则需要装虚拟机 新建一个文件名字为Dockerfile&#xff0c;无需后缀 文件完整名就是Dockerfile 编写dockerfile FROM nginx RUN echo hello nginx!…

golang windows 环境搭建 环境配置

golang windows 环境搭建 环境配置 Golang学习之路一环境搭建 MacBook Linux 树莓派raspberrypi安装Golang环境 官网下载地址: https://go.dev/dl/ https://golang.google.cn/dl/ 下载对应系统版本&#xff0c;例如windows 64位系统&#xff0c;下载&#xff1a;xxx.window…

年终奖,有人欢喜有人忧

每年的年终奖&#xff0c;有人欢喜有人忧&#xff0c;这是科技圈的一种共同现象。最近&#xff0c;科技界最热门的新闻无疑是Meta公布了其Q4和2023年全年财报&#xff0c;被许多人誉为“史上最强财报”。 Meta的股价也从2022年的最低点90美元左右&#xff0c;一路飙升至现在的每…

2024.02.06

TCP提供面向有连接的&#xff0c;可靠的数据传输服务&#xff0c;传输过程中&#xff0c;数据无误、数据无丢失、数据无失序、数据无重复 UDP面向无连接的&#xff0c;不保证数据可靠的&#xff0c;尽最大努力传输的协议&#xff0c;数据传输过程中&#xff0c;可能出现数据丢…

【C++11】统一初始化 和 initializer_list

文章目录 一、概念辨析1. 声明、定义、初始化、赋初值的概念2. 默认初始化 和 未被初始化 的概念 二、C98 的列表初始化三、C11 对列表初始化的扩展&#xff08;统一初始化&#xff09;四、标准库中的 initializer_list 类五、正确理解“统一初始化”和 initializer_list 的区别…

JRT监听程序

本次设计避免以往设计缺陷&#xff0c;老的主要为了保持兼容性&#xff0c;在用的设计就不好调了。 首先&#xff0c;接口抽象时候就不在给参数放仪器ID和处理类了&#xff0c;直接放仪器配置实体&#xff0c;接口实现想用什么属性就用什么属性&#xff0c;避免老方式要扩参数时…

Golang GC 介绍

文章目录 0.前言1.发展史2.并发三色标记清除和混合写屏障2.1 三色标记2.2 并发标记问题2.3 屏障机制Dijkstra 插入写屏障Yuasa 删除写屏障混合写屏障 3.GC 过程4.GC 触发时机5.哪里记录了对象的三色状态&#xff1f;6.如何观察 GC&#xff1f;方式1&#xff1a;GODEBUGgctrace1…

cocos creator 3.x 预制体无法显示

双击预制体&#xff0c;进入详情页&#xff0c;没有显示资源 Bomb 是个预制体&#xff0c;但是当我双击进来什么都没有了&#xff0c;无法对预制体进行可视化编辑 目前我只试出来一个解决方法&#xff1a; 把预制体拖进Canvas文件中&#xff0c;这样就能展示到屏幕上&#xff…

springboot集成easypoi导出多sheet页

pom文件 <dependency><groupId>cn.afterturn</groupId><artifactId>easypoi-base</artifactId><version>4.1.0</version> </dependency> 导出模板&#xff1a; 后端代码示例&#xff1a; /*** 导出加油卡进便利店大额审批列…

三网码支付系统源码,三网免挂有PC软件,有云端源码,附带系统搭建教程

搭建教程 1.先上传云端源码 然后配置Core/Config.php文件里面数据库信息注改&#xff1b;数据库帐号密码 2.云端源码里面Core/Api_Class/Instant_Url_List.php文件配置终端地址注改&#xff1b;第4 http://终端地址/ 3.导入云端数据库 账号admin 密码123456注改&#xff1…

ELAdmin 前端启动

开发工具 官方指导的是使用WebStorm&#xff0c;但是本人后端开发一枚&#xff0c;最终还是继续使用了 idea&#xff0c;主打一个能用就行。 idea正式版激活方式&#xff1a; 访问这个查找可用链接&#xff1a;https://3.jetbra.in/进入任意一个能用的里面&#xff0c;顶部提…

java---查找算法(二分查找,插值查找,斐波那契[黄金分割查找] )-----详解 (ᕑᗢᓫ∗)˒

目录 一. 二分查找&#xff08;递归&#xff09;&#xff1a; 代码详解&#xff1a; 运行结果&#xff1a; 二分查找优化&#xff1a; 优化代码&#xff1a; 运行结果&#xff08;返回对应查找数字的下标集合&#xff09;&#xff1a; ​编辑 二分查找&#xff08;非递归…

YUM | 包安装 | 管理

YUM 功能 软件包安装&#xff1a; 通过yum命令安装软件包。例如&#xff0c;安装一个名为 example-package 的软件包 yum install example-package更新包 检查更新&#xff1a; 检查可用更新&#xff1a; sudo yum check-update <package_name>软件包更新&#xff1a; y…