传统上,客户端将依靠浏览器来处理从服务器下载文件。然而,这种方法需要打开一个新的浏览器窗口,iframe或任何其他类型的不友好和黑客行为。为下载请求添加额外的头信息也很困难。更好的解决方案是使用HTML5 File API以及XMLHttpRequest或请求库。

File API允许您在浏览器中创建,加载和操作文件。我们可以使用a Blob 创建一个内存文件:

const blob = new Blob(['lorem ipsum'],{type:'text / plain'});

通过一些额外的工作,我们可以将这个文件下载到我们的文件系统中:

index.html

<DIV>

<a href='#' id='trigger'>创建并下载Lorem Ipsum </a>

</ DIV>

main.js

const trigger = document.querySelector('#trigger');

trigger.addEventListener('click',()=> {

const blob = new Blob(['lorem ipsum'],{type:'text / plain'});

blob.name ='lorem.txt'

const reader = new FileReader();

reader.onload = e => {

const anchor = document.createElement('a');

anchor.style.display ='none';

anchor.href = e.target.result;

anchor.download = blob.name;

anchor.click();

};

reader.readAsDataURL(BLOB);

});

这是一个工作示例。当你点击trigger时,我们创建一个抛弃锚点元素,它接收一个下载属性,其中包含我们想要保存的文件名以及由此生成的URL,

readAsDataURL()它实际上表示我们的数据为base64编码的字符串。然后,我们模拟新的元素上的点击事件来触发下载。

现在让我们从httpbin获取一个图像:

index.html

<DIV>

<a href='#' id='trigger'>请求图片和下载</a>

<img />

</ DIV>

main.js

我们正在为xxxx.org创建对JPEG图像的请求,并使用与之前相同的逻辑,将图像数据加载到一个blob

并将其下载到用户文件系统。

利用这种技术,我们可以优雅地将我们需要的所有额外属性添加到ajax请求中。你甚至可以将它包装在一个漂亮的Vue.JS或React组件中。

DEMO下载地址:https://dwz.cn/Jw3z6fVq

js之Ajax下载文件的更多相关文章

  1. 如何用ajax下载文件

    引子 在HTML5没来之前,浏览器想要下载文件,可能有这么几种方式: 借助a标签,<a href="学习资料.xlsx"></a> window.locat ...

  2. Ajax 下载文件 文件被损坏

    问题表现 Ajax 下载文件成功后,打开提示格式损坏,源代码如下: axios({ method: 'get', url: "/public/工作簿1.xlsx", // 静态资源 ...

  3. Ajax下载文件(页面无刷新)

    说明:Ajax是无法实现文件传输的,本文只是模拟了Ajax不刷新页面就可以请求并返回数据的效果.实质上还是通过提交form表单来返回文件流的输出. 分步实现逻辑: ajax请求服务器,访问数据库,根据 ...

  4. js通过 URL下载文件

    页面上一个button,点击之后触发一个function去请求数据,返回 pdf/epub 的URL,然后下载这个文件. 本来是直接用 a 写的,href里放资源地址,target设为'_blank' ...

  5. jQuery用FormData对象实现文件上传以及如何通过ajax下载文件

    之前在Vue的项目里面用到过文件上传,封装好的组件用起来比较顺手,查询Element-UI文档,十八般武器样样都有,一顿操作猛如虎,一看--跑偏了(⊙o⊙)-,我的意思就是用框架实现比较简单,但是如果 ...

  6. 怎么用ajax下载文件

    可能大家都觉得没有必要用ajax来下载东西,用window.open(url)就可以搞定 但是这有一个问题,就是这就限定了只能用GET方式来请求了: 可能你又会说GET很符合REST的要求呀. 但是如 ...

  7. python django + js 使用ajax进行文件上传并获取上传进度案例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 原生js实现ajax的文件异步提交功能、图片预览功能.实例

    采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...

  9. jquery.form.js ie 下下载文件已经ie8失效问题解决方案

    https://github.com/malsup/form/blob/master/jquery.form.js在使用这个插件时遇到的问题1.ie下会变成下载文件,解决方案是在后端返回时设置'Con ...

随机推荐

  1. 云笔记项目-MyBatis返回自增类型&堆栈对象补充理解

    在云笔记项目中,讲到了MySql的自增,MyBatis查询到自增类型数据后可以设置返回到参数属性,其中学习了MySql的自增写法,堆栈对象等知识. MySql数据类型自增 建立一张Person表,其中 ...

  2. Java基础第一天(标识符、变量)

    一.标识符 Java对各种变量.类.方法命名时的字符序列. 凡自己可以起名字的地方都叫标识符. 标识符特点: 1.26个英文字母大小写,0~9,$,_ 组成. 2.数字不可以做开头. 3.不可以使用关 ...

  3. iframe登录超时跳转登录页面

    1.可以在登录页面加jQuery验证 $(function () { //判断一下当前是不是做顶层,如果不是,则做一下顶层页面重定向 if (window != top) { top.location ...

  4. Linux-02

    Linux命令 命令格式:命令  [-选项]  [参数] 例如: ls -la /etc 说明:1)个别命令使用不遵循此格式 2)当有多个选项时,可以写在一起 3)简化选项与完整选项-a等于--all

  5. Python设计模式 - UML - 交互概述图(Interaction Overview Diagram)

    简介 交互概述图是将不同交互图衔接在一起的图,属于UML2.0的新增图.交互概述图并没有引入新的建模元素,其主要元素来自于活动图和时序图.交互概述图侧重从整体上概览交互过程中的控制流,包括交互图之间的 ...

  6. Android 菊花加载工具类

    先看看实现效果图 1.首先自定义一个类继承系统ProgressDialog /** * Created by hanbao0928 on 2018/11/1. */ public class Dial ...

  7. paloalto防火墙的优势

    1.所有 Palo Alto Networks 防火墙提供一个可用于执行防火墙管理功能的带外管理端口 (MGT).通过使用该 MGT 端口,可以将防火墙的管理功能与数据处理功能分开,从而保护对防火墙的 ...

  8. web前端面试题题目

    一.各种浏览器兼容的前缀:-o-(Opera),-ms-(IE): -moz-(火狐):-webkit-(chrome) 二.存在兼容性的css属性:placeholder,主要是因为各种浏览器pla ...

  9. php 微信自定义分享接口

    <?php class JSSDK { private $appId; private $appSecret; public function __construct($appId, $appS ...

  10. visual studio vode 汉化

    在vs code 的商店中搜索Chinese,找到如下模块,安装. 安装后,按下ctrl+shift+p,找到configure display language ,点击进入,修改 改成如图字母就可以 ...