js实现下载(文件流式)方法详解与完整实例源码

在介绍JS文件流式下载文件方法之前,先记录下window.location.href的使用方法

window.location.href的用法

javascript中的location.href有很多种用法,主要如下。

self.location.href="/url"//当前页面打开URL页面
location.href="/url"//当前页面打开URL页面
windows.location.href="/url" //当前页面打开URL页面,前面三个用法相同。
this.location.href="/url" //当前页面打开URL页面
parent.location.href="/url" // 在父页面打开新页面
top.location.href="/url" //在顶层页面打开新页面

如果页面中自定义了frame,那么可将parent self top换为自定义frame的名称,效果是在frame窗口打开url地址

此外,window.location.href=window.location.href;window.location.Reload()和都是刷新当前页面。区别在于是否有提交数据。

当有提交数据时,window.location.Reload()会提示是否提交,window.location.href=window.location.href;则是向指定的url提交数据

JS文件流式下载文件源码实例

下面是使用axios写的一个完整JS文件流式下载文件的完整源码

const apiurl = '' // 接口地址
this.exportLoading = true
axios.post(apiurl, params, {
   'responseType': 'blob'  //设置响应的数据类型为一个包含二进制数据的 Blob 对象,必须设置!!!
}).then( (response) =>{
    console.log('response', response, response.data.size)
    this.exportLoading = false
    if(response.data){
        if(response.data.size < 1000){
        	// 根据文件流的大小判断异常情况
            if(response.data.size == 63){
                this.$message.warning('查无结果');
                return
            }
            if(response.data.size == 84){
                this.$message.warning('导出数据超出最大限制值');
                return
            }
        }else{
            const blob = new Blob([response.data],{type: 'application/vnd.ms-excel'})
            const linkNode = document.createElement('a');
            linkNode.style.display = 'none';
            linkNode.href = URL.createObjectURL(blob); //生成一个Blob URL
            document.body.appendChild(linkNode);
            linkNode.click();  //模拟在按钮上的一次鼠标单击
            URL.revokeObjectURL(linkNode.href); // 释放URL 对象
            document.body.removeChild(linkNode);
        }
    }
}).catch( (error) =>{
    console.log(error);
    this.exportLoading = false
});
(0)

相关推荐

  • JavaScript实现多文件下载方法解析

    对于文件的下载,可以说是一个十分常见的话题,前端的很多项目中都会有这样的需求,比如 highChart 统计图的导出,在线图片编辑中的图片保存,在线代码编辑的代码导出等等.而很多时候,我们只给了一个链接,用户需要右键点击链接,然后选择"另存为",这个过程虽说不麻烦,但还是需要两步操作,倘若用户想保存页面中的多个链接文件,就得重复操作很多次,最常见的就是英语听力网站上的音频下载,手都要点麻! 本文的目的是介绍如何利用 javascript 进行多文件的下载,也就是当用户点击某个链接或者按

  • javascript实现生成并下载txt文件方式

    目录 js生成并下载txt文件 下表显示了FileSaver.js在不同浏览器中的兼容性 js导出文件为txt并下载 首先HTML结构使用最简单的结构 然后js js生成并下载txt文件 下面的简单函数允许您直接在浏览器中生成文件,而无需接触任何服务器. 它适用于所有HTML5就绪的浏览器,因为它使用了<a>的下载属性: function download(filename, text) {   var element = document.createElement('a');   elem

  • JavaScript 中如何实现大文件并行下载

    目录 一.HTTP 范围请求 1.1 Range 语法 二.如何实现大文件下载 2.1 定义辅助函数 2.2 大文件下载使用示例 三.总结 相信有些小伙伴已经了解大文件上传的解决方案,在上传大文件时,为了提高上传的效率,我们一般会使用 Blob.slice 方法对大文件按照指定的大小进行切割,然后在开启多线程进行分块上传,等所有分块都成功上传后,再通知服务端进行分块合并. 那么对大文件下载来说,我们能否采用类似的思想呢?在服务端支持 Range 请求首部的条件下,我们也是可以实现多线程分块下载的

  • 使用 JavaScript 创建并下载文件(模拟点击)

    先上代码 /** * 创建并下载文件 * @param {String} fileName 文件名 * @param {String} content 文件内容 */ function createAndDownloadFile(fileName, content) { var aTag = document.createElement('a'); var blob = new Blob([content]); aTag.download = fileName; aTag.href = URL.

  • JavaScript实现文件下载并重命名代码实例

    这篇文章主要介绍了JavaScript实现文件下载并重命名代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 第一种是HTML官网中的方法 <a href="/images/liang.jpg" rel="external nofollow" download="文件名称"> HTML5 中 a 标签提供了一个 filename 属性,可以下载成指定的 download 属性名称

  • javascript Blob对象实现文件下载

    目录 说明 一.Blob对象 二.前端 三.后端 总结 说明 最近遇到一个需求,文件下载,但需要鉴权,这就意味着不能用后台返回下载链接的方式进行下载,因为一旦被别人拿到这条链接,就可以不需要任何权限就直接下载,因此需要换种思路,在一番百度之后,了解到了blob对象,这就是本文要讲的内容 注意:本文仅为记录学习轨迹,如有侵权,联系删除 一.Blob对象 Blob 对象表示一个不可变.原始数据的类文件对象.它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数

  • js实现文件流式下载文件方法详解及完整代码

    JS实现流式打包下载说明 浏览器中的流式操作可以节省内存,扩大 JS 的应用边界,比如我们可以在浏览器里进行视频剪辑,而不用担心视频文件将内存撑爆. 浏览器虽然有流式处理数据的 API,并没有直接提供给 JS 进行流式下载的能力,也就是说即使我们可以流式的处理数据,但想将其下载到磁盘上时,依然会对内存提出挑战. 这也是我们讨论的前提: 流式的操作,必须整个链路都是流式的才有意义,一旦某个环节是非流式(阻塞)的,就无法起到节省内存的作用. 本篇文章分析了如何在 JS中流式的处理数据 ,流式的进行下

  • JavaScript进阶之前端文件上传和下载示例详解

    目录 文件下载 1.通过a标签点击直接下载 2.open或location.href 3.Blob和Base64 文件上传 文件上传思路 File文件 上传单个文件-客户端 上传文件-服务端 多文件上传-客户端 大文件上传-客户端 大文件上传-服务端 文件下载 1.通过a标签点击直接下载 <a href="https:xxx.xlsx" rel="external nofollow" download="test">下载文件</

  • javascript使用Blob对象实现的下载文件操作示例

    本文实例讲述了javascript使用Blob对象实现的下载文件操作.分享给大家供大家参考,具体如下: Blob对象 前言 环境 操作 总结 Blob是一个类文件的不可变的原始数据对象,非javascript原生数据类型,File对象就是继承自Blob对象,且在Blob的基础上进行扩展,以便支持用户系统上的文件. 前言 最近在做以post请求方式导出excel时,想到了可以使用Blob对象将后台返回的输出流以arraybuffer或blob的格式接收交给Blob处理,最后使用URL生成链接,供浏

  • Mybatis-plus使用TableNameHandler分表详解(附完整示例源码)

    为什么要分表 Mysql是当前互联网系统中使用非常广泛的关系数据库,具有ACID的特性. 但是mysql的单表性能会受到表中数据量的限制,主要原因是B+树索引过大导致查询时索引无法全部加载到内存.读取磁盘的次数变多,而磁盘的每次读取对性能都有很大的影响. 这时一个简单可行的方案就是分表(当然土豪也可以堆硬件),将一张数据量庞大的表的数据,拆分到多个表中,这同时也减少了B+树索引的大小,减少磁盘读取次数,提高性能. 两种基础分表逻辑 说完了为什么要分表,下面聊聊业务开发中常见的两种基础的分表逻辑.

  • PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】 原创

    本文实例讲述了PHP实现生成vcf vcard文件功能类定义与使用方法.分享给大家供大家参考,具体如下: 前面介绍了php读取vcf文件的方法,这里再来研究一下vcf文件的生成方法. VCF格式是Windows系统中outlook的名片存储格式,打开VCF格式需要使用手机的相应配套软件,使用outlook也可以打开VCF文件. 手机通讯录保存的文件格式也是vcf格式.这里就来给出一个使用php生成vcf格式文件的实例. 具体代码如下: <?php date_default_timezone_se

  • Android编程实现仿优酷圆盘旋转菜单效果的方法详解【附demo源码下载】

    本文实例讲述了Android编程实现仿优酷圆盘旋转菜单效果的方法.分享给大家供大家参考,具体如下: 目前,用户对安卓应用程序的UI设计要求越来越高,因此,掌握一些新颖的设计很有必要. 比如菜单,传统的菜单已经不能满足用户的需求. 其中优酷中圆盘旋转菜单的实现就比较优秀,这里我提供下我的思路及实现,仅供参考. 该菜单共分里外三层导航菜单.可以依次从外向里关闭三层菜单,也可以反向打开,并且伴有圆盘旋转的动画效果 首先,看下效果: 以下是具体的代码及解释: 1. 菜单布局文件: 大家看到主要有三个Ra

  • Android开发之HttpClient异步请求数据的方法详解【附demo源码下载】

    本文实例讲述了Android开发之HttpClient异步请求数据的方法.分享给大家供大家参考,具体如下: 前面一篇Android开发笔记之:AsyncTask的应用较为详细的讲述了Asynctask的原理与应用,这里来结合使用一下HttpClient与Asynctask~ 代码编写如下: 服务器代码我就不写出来了,就是一个用户名和密码~ 1.写一个类HttpClientUtil,来实现HttpClient对象的创建并且返回HttpResponse对象 public class HttpClie

  • 微信小程序自定义toast实现方法详解【附demo源码下载】

    本文实例讲述了微信小程序自定义toast实现方法.分享给大家供大家参考,具体如下: 一.微信官方默认toast toast最常见了,几乎每个App都有这样的特效,先看下小程序自带的toast效果,立马想死的心都有了~~ 微信自带toast的效果: js文件: wx.showToast({ title: '成功', icon: 'success', duration: 2000 }) 用法超级简单,但官方小程序有几个问题: 只能显示success.loading两种icon 且icon不可去除 持

  • javascript读取本地文件和目录方法详解

    JavaScript是网页制作中离不开的脚本语言,依靠它,一个网页的内容才生动活泼.富有朝气.但也许你还没有发现并应用它的一些更高级的功能吧?比如,对文件和文件夹进行读.写和删除,就象在VB.VC等高级语言中经常做的工作一样.怎么样,你是否需要了解这方面的知识?那就请跟我来,本文将详细描述如何使用Javascript语言进行文件操作. 一.功能实现核心:FileSystemObject 对象 其实,要在Javascript中实现文件操作功能,主要就是依靠FileSystemobject对象.在详

  • C++文件流读写操作详解

    目录 1.打开文件 1.1 fstream类型 1.2 open()的函数原型 1.3 打开方式 1.4 打开文件的属性 1.5 示例代码 2.文本文件的读写 2.1 写文件示例 2.2 读文件示例 2.3 逐字符读取和逐行读取 2.4 统计文本行数及读取某一行内容 2.5 读取数据到数组当中 3.状态标志符的验证(Verification of state flags) 4.获得和设置流指针(get and put stream pointers) 5.二进制文件 6.缓存和同步(Buffer

  • JS三目运算(三元运算)方法详解

    1.什么是三目运算:(布尔表达式 ? 值0:值1;) 5>3?alert('5大'):alert('3大'); 即    if(5>3){alert('5大')}else{alert('3大')}; 注意:三目运算和if(){}else{}的 区别是三目运算有返回值 例如: var max = a>b?a:b; 2.多条件的三目运算怎么写: 实例:根据学生成绩判定ABCD四个等级 var result = (sc<0 || sc>100) ?("分数无效"

  • 对python中xlsx,csv以及json文件的相互转化方法详解

    最近需要各种转格式,这里对相关代码作一个记录,方便日后查询. xlsx文件转csv文件 import xlrd import csv def xlsx_to_csv(): workbook = xlrd.open_workbook('1.xlsx') table = workbook.sheet_by_index(0) with codecs.open('1.csv', 'w', encoding='utf-8') as f: write = csv.writer(f) for row_num

  • vue.js 双层嵌套for遍历的方法详解, 类似php foreach()

    主要运用 template 标签,可相当于 php foreach() foreach(lists as $key){ //todo foreach($key.自定义字段 as k){ //todo } } <template v-for="key in lists" v-cloak> <tr> <td></td> <td ></td> <td ></td> <td ></

随机推荐