vue/js实现文件流下载,文件下载进度监听

2023-11-04

	/**
     * 文档下载(通过文档请求,直接下载文档)
     * url 请求路径
     * fileName 下载名称
     * size 文件大小
     */
    loadDown (url, fileName, size) {
      var _this = this
      var xhr = new XMLHttpRequest()
      xhr.open('GET', url, true) // 也可以使用POST方式,根据接口
      xhr.responseType = 'blob'
      xhr.onprogress = function (event) {
         // 用于监听下载进度,需要知道文件大小
         if (event.loaded === size) {
           _this.downloadLoading = false
         }        
      }
      xhr.onload = function () {
        if (this.status === 200) {
          var content = this.response
          var aTag = document.createElement('a')
          var blob = new Blob([content])
          aTag.download = fileName
          aTag.href = URL.createObjectURL(blob)
          aTag.click()
          URL.revokeObjectURL(blob)
        }
      }
      xhr.send()
    }
    /**
    *request请求,获取文件地址
    */
     async handlePreview (file) {
      var _this = this
      var xhr = new XMLHttpRequest()// 第一步:新建对象
      xhr.open('GET', file.url, true)// 第二步:打开连接  将请求参数写在url中
      xhr.send()// 第三步:发送请求  将请求参数写在URL中
      /**
         * 获取数据后的处理程序
         */
      xhr.onreadystatechange = function (res) {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var str = xhr.responseText// 获取到json字符串,解析
          str = JSON.parse(str)        
          _this.loadDown(str.d, file.name)
        }
      }
    },
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue/js实现文件流下载,文件下载进度监听 的相关文章

随机推荐

  • vscode统计代码行数,前端开发配置、快捷键使用

    1 统计代码行数 使用场景是项目年终统计行数 实现 在需要统计得文件夹右键 在文件夹中查找 后输入筛选得正则表达式 b b 注意右边小图标都点亮 这里顺便将自己使用vscode进行前端开发环境配置归纳一下 便于自己以后快速搭建 vscode
  • 稳健回归(Robustness regression)

    稳健回归 Robustness regression 标签 空格分隔 监督学习 author duanxxnj 163 com time 2016 07 08 稳健回归Robustness regression 最小二乘法的弊端 稳健回归
  • PHP 垃圾回收机制(GC)

    提示 文章写完后 目录可以自动生成 如何生成可参考右边的帮助文档 目录 前言 一 GC回收机制是什么 二 引用技术的知识 三 GC垃圾回收机制的使用 四 CISCN 2022 初赛 ezpentest 五 NSSCTF prize p1 前
  • Java-基于SSM的人事管理系统

    项目背景 在高速发展的时代 众多的软件被开发出来 给用户带来了很大的选择余地 而且人们越来越追求更个性的需求 在这种时代背景下 人们对人事管理系统越来越重视 更好的实现人事管理系统的有效发挥 本文将通过人事管理系统的信息 分析在日常生活中对
  • linux搭建测试环境

    微信设置水滴昵称 个性中带点萌 Linux搭建测试环境安装软件详细步骤 一 安装jdk1 8 二 jdk与tomact对应版本 三 安装tomact 四 安装mysql mysql 5 7 24 linux glibc2 12 x86 64
  • 高考+考研,如何选择人工智能相关专业?

    世界杯如火如荼 高考报志愿 确定考研目标也在火热展开中 人工智能行业如此热门 那么目前都哪有 科班 专业可供选择呢 结合相关资料 整理出与AI紧密相关的国内高校与科研院所名单 希望能帮到小伙伴们 成为朝阳产业 人工智能是研究 开发用于模拟
  • 删除文件名含有特殊字符的文件

    删除文件名含有特殊字符的文件 当你要删除含有特殊字符的文件名时 有以下几种情况 使用转义字符 引号 rm rf rm rf rm rf 上述命令删除文件名为 的文件 如果直接删除 那么根目录中的所有文件都会丢失 这种方式能够适用于大多数情况
  • jenkins war包 centos启动安装指导

    文章目录 问题回顾 1 进入官网 下载到Jenkins的war包 1 1 放置在指定位置 1 2 放置安装包和创建文件放置路径 1 3 检查环境 1 4 配置启动命令和结束命令 2 启动后进入到Jenkins页面 2 1 安装插件 例如流水
  • (一)Springboot原理源码解析之Springboot框架组成

    目录 一 总体框架构成 1 注解组成关系 2 类继承和调用关系 二 框架总体调用流程 1 入口类中的流程 2 Spring刷新流程 一 总体框架构成 我在分析Springboot的组成部分把其分成了两部分 注解组成及关系 主要说明了在启动过
  • LeetCode.81 搜索旋转排序数组Java

    LeetCode 81 搜索旋转排序数组 注意 通过mid和左边数字大小可以判断到底是左边有序还是右边有序 需要处理重复数字最后才能通过 代码 class Solution public boolean search int nums in
  • 信奥赛一本通 C++题解 2034【例5.1】反序输出

    2034 例5 1 反序输出 时间限制 1000 ms 内存限制 65536 KB 提交数 23315 通过数 9932 题目描述 输入n 个数 要求程序按输入时的逆序把这n个数打印出来 已知整数不超过100个 也就是说 按输入相反顺序打印
  • Element-ui表单验证验证失败,input内有内容仍然验证为空的问题,验证数值类型不一致问题

    首先展示正确的格式 以验证是否为空为例 html代码块
  • QProcess 类使用总结

    背景 QProcess 类用于启动外部程序并与它们通信 QProcess 将进程视为I O 设备 可以对进程进行写入和读取 调用参数设置 同时指定路径和参数调用程序 QProcess process new QProcess this pr
  • 阿里云轻量级服务器安装--宝塔面板

    一 环境 1 服务器 阿里云轻量级服务器 2 环境 CentOS 7 6 二 安装 1 打开远程链接 2 输入安装命令 yum install y wget wget O install sh http download bt cn ins
  • js加密字符串

    字符串加密 用javascript对字符串进行加密 应用于参数传递等 默认加密密钥为kb1234 使用者可自定义修改 注意加密密钥应和解密密钥相同 算法来自于互联网 使用方法 加密 var code kbt encrypt 我爱北京天安门
  • 大算力时代已经到来

    计算机发展到现在 早已经历了大数据时代 而现如今国家也注意到国民大数据的重要性 而给予保护性条款和制度的建立 我觉得这只是早已注定的结局 但是未来该走向何方 着眼当下 我们互联网人早已身处在答案之中 大算力 Big Computing Po
  • 清除windows登录密码

    清除windows登录密码 原理 替换登录界面中的工具 登录界面中的轻松使用中的工具一般有放大镜 c Windows System32 Magnify exe 屏幕键盘 讲述人等 可以使用下列方法之一完成 命令行下的操作 替换后重启系统 点
  • 为什么打两拍可以消除亚稳态的影响?

    为什么打两拍可以消除亚稳态的影响 首先 我们需要了解什么是亚稳态 看下图 简单来说 就是当时钟信号上升沿到来的时候正好采样的数据也在发生变化 但是对于采样的时钟信号 如果想要采样得到一个稳定值 在clk的上升沿的前一段时间有一个建立时间TS
  • POP3协议分析

    感谢原作者 http blog csdn net bripengandre article details 2192111 POP3协议分析 第1章 POP3概述 POP3全称为Post Office Protocol version3 即
  • vue/js实现文件流下载,文件下载进度监听

    文档下载 通过文档请求 直接下载文档 url 请求路径 fileName 下载名称 size 文件大小 loadDown url fileName size var this this var xhr new XMLHttpRequest