Data URLs

Data URLs: 即前缀为data: 协议的URL,其允许内容创建者向文档中嵌入小文件。

  例如:可以直接在HTML中的img元素直接使用Data URLs ;

data:[<mediatype>][;base64],<data>
  • mediatype: 是个 MIME 类型的字符串,例如 "image/jpeg" 表示 JPEG 图像文件,'text/plain' 则表示txt文件,"excel/plain" 则表示excel文件;如果被省略,则默认值为 text/plain;charset=US-ASCII。
  • base64:即是base64编码,如果data是文本格式,可以直接嵌入文本。如下:
data:,Hello%2C%20World!  // text/plain 类型数据
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D  // base64 编码版本

  如果是二进制数据,可以进行base64编码之后再进行嵌入。在JavaScript中,有两个函数btoa()atob()分别用于解码和编码base64字符串。

Blob

Blob 对象表示一个不可变、原始数据的类文件对象,其中Blob.size代表对象中所包含数据的大小(字节),Blob.type 表明该Blob对象所包含数据的 MIME 类型。

  其方法主要是blob.arrayBuffer()返回一个promise且包含blob所有内容的二进制格式的ArrayBuffer。

// 可以直接创建一个简单的文本Blob对象
new Blob(["hello world"]) 
// 一个包含DOMString的数组,然后创建一个HTML类型的Blob对象
new Blob(["hello world".bold()], {type : 'text/html'});

  了解了上面的概念之后,步入正题

  1. 最简单的方式,比如下载图片,可以让后端以附件的形式下载,加以下面代码downloadSimple()方法,就可以下载图片文件了。

  downloadSimple(url: string, fileName: string) {
 const anchor = document.createElement('a');
const fileName = fileName || 'download';
if ('download' in anchor) { //html5 A[download]
anchor.href = url;
anchor.setAttribute("download", fileName);
anchor.className = "download-js-link";
anchor.innerHTML = "downloading...";
anchor.style.display = "none";
document.body.appendChild(anchor);
setTimeout(function () {
anchor.click();
document.body.removeChild(anchor);
}, 66);
return true;
}
 }

  2.GET请求下载,且responseType为blob。代码如下:(Get方法长度限制最大不要超过2048,即2048+35。这里要解释一下,其实get方法并没有限制URL最大长度限制,是浏览器的限制要求,而这个2083就是IE浏览器限制的最大长度,也是各个浏览器当中最小)。

 if (url && url.length < 2048) {
fileName = url.split("/").pop().split("?")[0];
anchor.href = url;
if (anchor.href.indexOf(url) !== -1) {
var ajax = new XMLHttpRequest();
ajax.open("GET", url, true);
ajax.responseType = 'blob';
ajax.onload = function (e:any) {
_this.downloadSimple(e.target.response, fileName); // 调用上面的a标签式下载方法
};
setTimeout(function () { ajax.send(); }, 0);
return ajax;
}
}

  3.POST方式下载,且后端返回base64编码格式的数据流,类似于这种(ZtjuPPe2d+GefPrD1RpnS6MGdJkebn4/+oMSAAOw==),然后可以拼接成Data URLs格式,用以上的代码段downloadSimple()就可以直接下载文件,如果是下载excel文件,则Data URLs的参数mediatype为"excel/plain" 。

  但是如果是IE浏览器用这种代码不行,可以用navigator.msSaveBlob()方法下载一个Blob 对象。首先需要把Data URLs转换成可供浏览器下载的Blob 对象。方法如下:

  

    function dataUrlToBlob(strUrl: string) {
var parts = strUrl.split(/[:;,]/),
type = parts[1],
decoder = parts[2] == "base64" ? atob : decodeURIComponent,
binData = decoder(parts.pop()),
mx = binData.length,
i = 0,
uiArr = new Uint8Array(mx); for (i; i < mx; ++i) uiArr[i] = binData.charCodeAt(i); return new myBlob([uiArr], { type: type });
}
  navigator.msSaveBlob(dataUrlToBlob(url));

前端JS下载文件总结的更多相关文章

  1. 小谢第10问:前端JS下载文件、表格

    对于小型文件及表格下载,一般采用a标签形式 <buttonb @click="downloadTemplate()">模板下载</button> downl ...

  2. 10.用js下载文件(需要后端链接)

          用js下载文件 PS:本文说的,并非如何用js创建流.创建文件.实现下载功能. 而是说的:你已知一个下载文件的后端接口,前端如何请求该接口,实现点击按钮.下载文件到本地.(可以是zip啦. ...

  3. ajax下载,前端js下载(转)

    前面一直做过下载的功能.就是后台将文件流写入response里面,然后就好了.前台会自动弹出下载提示等. 今天打算做一个ajax下载.想当然的结果死活浏览器没反应.我擦. 然后浏览器调试,发现resp ...

  4. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  5. 使用js下载文件

    使用Echarts地图时,需要一些地图数据,到Echarts下载地图数据文件时,发现其下载是直接通过js下载,从其网站上扒下来的记录于此 FileSave.min.js网络地址:http://ecom ...

  6. Js下载文件到本地(兼容多浏览器)

    在客户端通过js下载文件,试过几种下载方式,iframe方式仅限于IE浏览器,window.open(url),location.href=url 这两种方式在chrome浏览器还会是直接打开文件而不 ...

  7. 两种 js下载文件的步骤

    ----------------------------------引用地址链接------------------------------------------------- http://www ...

  8. OSS阿里云上传文件 前端js下载url跨域问题

    场景: 1.后端上传文件至阿里云OSS,返回得到一个URL. 2.前端用这个URL下载文件,ajax请求异常:No 'Access-Control-Allow-Origin' header is pr ...

  9. Web前端js下载流文件

    前端下载文件大概有以下种: 1)a标签链接下载 <a href="url">点击链接下载</a> 2)表单form提交下载 var form = $(&qu ...

随机推荐

  1. redis集群搭建 不用ruby

    redis 从5开始 可以直接用redis-cli命令创建集群了,不用那么麻烦 安装ruby环境 redis配置文件需要修改的地方 port 7000 cluster-enabled yes clus ...

  2. flink 处理实时数据的三重保障

    flink 处理实时数据的三重保障 window+watermark 来处理乱序数据对于 TumblingEventTimeWindows window 的元数据startTime,endTime 和 ...

  3. C++学习---顺序表的构建及操作

    #include<iostream> #include<fstream> using namespace std; #define MAXLEN 100 //定义顺序表 str ...

  4. linux 查看nginx的安装路径等信息

    做个随笔,记录一下. 想查看nginx的配置文件,但不知道nginx是安装在哪个目录下? ps -ef | grep nginx Linux在启动一个进程时,系统会在/proc下创建一个以PID命名的 ...

  5. buuctf-misc 菜刀666

    解压出一个666666.pcapng的文件,我们拖进wireshark 因为是菜刀吗?一般都是post连接,于是我们过滤post数据 http.request.method==POST 然后分析流量, ...

  6. oracle oracle sqldeveloper 12505 创建连接失败

    ref:http://blog.csdn.net/yangwenxue_admin/article/details/45062557

  7. B树摘要

    BTree 以下内容是根据<算法导论>摘要而来,由于国内书籍对B树的定义是以阶来定义,而<算法导论>中使用的是最小度来定义,并且节点中关键字个数也不相同,在翻看网上博客时,产生 ...

  8. Spring框架中获取连接池常用的四种方式

    1:DBCP数据源 DBCP类包位于 /lib/jakarta-commons/commons-dbcp.jar,DBCP是一个依赖Jakarta commons-pool对象池机制的数据库连接池,所 ...

  9. 计算机CPU是怎么认识代码的?

    先说一下半导体,啥叫半导体?就是介于导体和绝缘体中间的一种东西,比如二极管.   电流可以从A端流向C端,但反过来则不行.你可以把它理解成一种防止电流逆流的东西. 当C端10V,A端0V,二极管可以视 ...

  10. 【Flutter 混合开发】添加 Flutter 到 Android Activity

    Flutter 混合开发系列 包含如下: 嵌入原生View-Android 嵌入原生View-iOS 与原生通信-MethodChannel 与原生通信-BasicMessageChannel 与原生 ...