Javascript前端下载后台传来的文件流代码实例

前台请求数据：

url: '/app/downloadApp',
 method: 'get',
 responseType: 'blob',
 params: data

设置接收参数格式为responseType: ‘blob',

downloadFile(res, fileName) {
   if (!res) {
    return
   }
   if (window.navigator.msSaveBlob) { // IE以及IE内核的浏览器
    try {
     window.navigator.msSaveBlob(res, fileName) // res为接口返回数据，这里请求的时候已经处理了，如果没处理需要在此之前自行处理var data = new Blob([res.data]) 注意这里需要是数组形式的,fileName就是下载之后的文件名
     // window.navigator.msSaveOrOpenBlob(res, fileName); //此方法类似上面的方法，区别可自行百度
    } catch (e) {
     console.log(e)
    }
   } else {
    let url = window.URL.createObjectURL(new Blob([res]))
    let link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.setAttribute('download', fileName)// 文件名
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link) // 下载完成移除元素
    window.URL.revokeObjectURL(url) // 释放掉blob对象
   }
 },
 download(){
   var data = {
    appId:this.appId
   }
   downloadAppAjax(data).then(res => {
     const filename = decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]);
     console.log(filename)
     this.downloadFile(res.data,filename)
   })
  }

这里的downloadAppAjax调用后台接口，请求数据，获取后台返回的数据没有文件名，最后发现在header Content-Disposition属性里 attachment;filename=app.jpg

所以我们要实现下载自动重命名就需要拿出filename，这里我们使用decodeURI对Content-Disposition属性值进行解码，拿到filename:

decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]);

拿到文件流和文件名后 接收文件流并创建地址

let url =window.URL.createObjectURL(new Blob([res]))

接着利用a标签进行下载即可。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JAVASCRIPT模式窗口中下载文件无法接收iframe的流

    在打开的模式窗口中,如果要借助于模式窗口接受服务器的流,通常需要隐藏一个iframe;有时候,然后采用iframe.src的形式去做请求:有时,在下载时发现服务器无法接收iframe的流,因为在模式窗口中没有触发iframe的src重新定向事件,普通的窗口无此问题. 具体解决办法: 在模式窗口的父窗口中隐藏一个iframe,下载的地址指向这个iframe.

  • Node.js从字符串生成文件流的实现方法

    一.背景 在文件相关的数据加工等场景下,经常面临生成的物理文件应该如何处理的问题,比如: 生成的文件放到哪里,路径存在不存在? 临时文件何时清理,如何解决命名冲突,防止覆盖? 并发场景下的读写顺序如何保证? -- 对于读写物理文件带来的这些问题,最好的解决办法就是 不写文件 .然而,一些场景下想要不写文件可不那么容易,比如文件上传 二.问题 文件上传一般通过表单提交来实现,例如: var FormData = require('form-data'); var fs = require('fs'

  • js使用文件流下载csv文件的实现方法

    理解Blob对象 在Blob对象出现之前,在javascript中一直没有比较好的方式处理二进制文件,自从有了Blob了,我们就可以使用它操作二进制数据了. 现在我们开始来理解下Bolb对象及它的文件流下载应用场景,话不多说了,来一起看看详细的介绍吧 1. 创建Blob对象方式如下: var blob = new Blob(dataArray, options); dataArray: 它是一个数组,它包含了要添加到Blob对象中的数据.数组可以是二进制对象或者字符串. options是可选的对

  • Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法

    fs模块.js: /* 1. fs.stat 检测是文件还是目录(目录 文件是否存在) 2. fs.mkdir 创建目录 (创建之前先判断是否存在) 3. fs.writeFile 写入文件(文件不存在就创建,但不能创建目录) 4. fs.appendFile 写入追加文件 5.fs.readFile 读取文件 6.fs.readdir 读取目录 7.fs.rename 重命名 8. fs.rmdir 删除目录 9. fs.unlink 删除文件 */ var fs=require('fs');

  • JavaScript读二进制文件并用ajax传输二进制流的方法

    综合网上多个教程,加上自己实践得出的方法,目前能够兼容谷歌.IE11.IE10. htmlbody里的内容,没什么特殊的. <div id="dConfirm"> <p style="float: left;margin-left: 20px;margin-top: 20px"> <form action="javascript: uploadAndSubmit();" name="demoForm&quo

  • JS构造一个html文本内容成文件流形式发送到后台

    JS构造一个html文本内容成文件流形式发送到后台

    具体代码如下所示: let html = <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>X-Find迅聘选才</title> <link rel=

  • 详解nodeJs文件系统（fs）与流（stream）

    一.简介 本文将介绍node.js文件系统(fs)和流(stream)的一些API已经参数使用情况. 二.目录 文件系统将介绍以下方法: 1.fs.readFile 2.fs.writeFile 3.fs.open 4.fs.read 5.fs.stat 6.fs.close 7.fs.mkdir 8.fs.rmdir 9.fs.readdir 10.fs.unlink stream流的四种类型readable,writable,duplex,transform以及stream对象的事件. 三.

  • Javascript前端下载后台传来的文件流代码实例

    前台请求数据: url: '/app/downloadApp', method: 'get', responseType: 'blob', params: data 设置接收参数格式为responseType: 'blob', downloadFile(res, fileName) { if (!res) { return } if (window.navigator.msSaveBlob) { // IE以及IE内核的浏览器 try { window.navigator.msSaveBlob(

  • Java 读取excel 文件流代码实例

    这篇文章主要介绍了Java 读取excel 文件流代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 public static void initType(String path) { try { //1 获取excel文件流 excel xls 文件 暂不支持xlsx if (path.contains("xlsx") || path.contains("XLSX")) { System.err.

  • vue使用axios导出后台返回的文件流为excel表格详解

    vue使用axios导出后台返回的文件流为excel表格详解

    目录 使用axios导出后台返回的文件流为excel vue axios导出excel乱码解决 使用axios导出后台返回的文件流为excel 之前有一个需求是要使用post请求,导出后台返回的文件流并在表格中使用,大概思路为使用axios请求回数据,定义数据为blob格式,再创建一个a标签自调就可以完成了 <button @click="download">导出</button> data() {     return {       isClick: tru

  • javascript前端和后台进行数据交互方法示例

    在开发中遇到了在没有jQuery的情况下需要与后台进行部分数据的交互,查找了部分资料使用JavaScript实现了操作,记录一下. //获取XMLHttpRequest对象用于与后台交互数据 function getXHR(){ var xmlHttp; try { xmlHttp=new XMLHttpRequest();//新版本浏览器 }catch(e) { try{ xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch(e)

  • java io读取文件操作代码实例

    这篇文章主要介绍了java io读取文件操作代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 主要分为字节读取和字符读取,字节读取可以一个一个读取和字节数组读取,字符读取同样之,字符读取适合文本读取,字节读取皆可以 这里直接上代码,读取文件的9个小demo package com.io; import org.junit.Test; import java.io.*; public class FileTest { //1.字节流字节一个

  • Python实现多线程下载文件的代码实例

    实现简单的多线程下载,需要关注如下几点:1.文件的大小:可以从reponse header中提取,如"Content-Length:911"表示大小是911字节2.任务拆分:指定各个线程下载的文件的哪一块,可以通过request header中添加"Range: bytes=300-400"(表示下载300~400byte的内容),注意可以请求的文件的range是[0, size-1]字节的.3.下载文件的聚合:各个线程将自己下载的文件块保存为临时文件,所有线程都完

  • Android中实现下载和解压zip文件功能代码分享

    本文提供了2段Android代码,实现了从Android客户端下载ZIP文件并且实现ZIP文件的解压功能,非常实用,有需要的Android开发者可以尝试一下. 下载: DownLoaderTask.java 复制代码 代码如下: package com.johnny.testzipanddownload; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.File; im

  • Python生成并下载文件后端代码实例

    txt文件 生成并下载txt文件: @app.route('/download', methods=['GET']) def download(): content = "long text" response = make_response(content) response.headers["Content-Disposition"] = "attachment; filename=myfilename.txt" return respons

  • 给WordPress的编辑后台添加提示框的代码实例分享

    给WordPress的编辑后台添加提示框的代码实例分享

    WordPress 3.5 新添加了一个提示框功能,可以创建一个提示框,然后指向任何元素,比如下边的例子: 本文就来教你怎么创建一个这样的提示框. 首先需要添加提示框的脚本,这样才能使用提示框的 JS 方法. //挂载提示框脚本 function Bing_admin_pointer_enqueue_scripts(){ wp_enqueue_style( 'wp-pointer' ); wp_enqueue_script( 'wp-pointer' ); } add_action( 'admi

  • PHP使用range协议实现输出文件断点续传代码实例

    range协议用途:一般是用在断点续传的时候,但是实际的用户很大,例如你的web server需要输出一个大文件,那么用range可以分段输出,缓解压力.同时在提供音乐视频等服务时可以缓冲下载,如果用户中途关闭,可以节约网络带宽. <?php // 文件名 $filename = $_GET ['filename']; // 文件路径 $location = 'media/' . $filename; // 后缀 $extension = substr ( strrchr ( $filename

随机推荐