Tested:

Firefox 33+ OK

Chrome 38+ OK

IE 6 -- IE 10 Failed

Thanks to 阮一峰's blog: http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html

The sample shows how to get blob data using javascript XmlHttpRequest by sync.

The w3c tell us cannot set responseType when async is false.

FROM: http://www.w3.org/TR/2012/WD-XMLHttpRequest-20121206/
If async is false, the JavaScript global environment is a document environment, and either the anonymous flag is set, the timeout attribute value is not zero, the withCredentials attribute value is true, or the responseType attribute value is not the empty string, throw an "InvalidAccessError" exception and terminate these steps.

The result is that the type of XMLHttpRequest.response always string, you must change string to blob.
if you not set "charset=x-user-defined", the string is ascii by default. The XMLHttpRequest.response is not correct, some bytes are changed.
I set to utf-8 or utf-16 also for test, but failed.
when using utf-8, the length of XMLHttpRequest.response is not correct
when using utf-16, the length equals to Real-Length/2. the problem is when Real-Length is odd I cannot get the last byte.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="aabb"></div>
<script>

var URL = URL || window;

function saveAs(blob, filename) {
var type = blob.type;
var force_saveable_type = 'application/octet-stream';
if (type && type != force_saveable_type) {
var slice = blob.slice || blob.webkitSlice || blob.mozSlice;
blob = slice.call(blob, 0, blob.size, force_saveable_type);
}

var url = URL.createObjectURL(blob);
console.log(url);
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = url;
save_link.download = filename;
save_link.text = 'ffff';

/*
// in firefox 33+
var m = document.getElementById('aabb');
m.innerHTML = '<a href="' +url+ '">FFF</a>';
*/

// in chrome 38+
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
URL.revokeObjectURL(url);

}

function binaryToBlob(data) {
var l = data.length, arr = new Uint8Array(l);

for(var i = 0; i < l; i++) {
arr[i] = data.charCodeAt(i);
}

return new Blob([arr], { type: 'image/octet-stream'})
};

(function(){
var r = new XMLHttpRequest();
r.open("GET", 'a.tif', false);
r.overrideMimeType('text/plain; charset=x-user-defined'); // this line is very important ,the charset must be x-user-defined
r.send();

var blob = binaryToBlob(r.response);
blob.fileType = "image/octet-stream";
saveAs(blob, 'res.tif');

})();

</script></body></html>

How to get blob data using javascript XmlHttpRequest by sync的更多相关文章

  1. caffe出错：Unknown bottom blob 'data' (layer 'conv1', bottom index 0)

    原文https://blog.csdn.net/u011070171/article/details/75425740 caffe训练出现如下错误: Unknown bottom blob 'data ...

  2. javascript XMLHttpRequest对象全面剖析

    转载:http://www.jb51.net/article/23175.htm 一. 引言 异步JavaScript与XML(AJAX)是一个专用术语,用于实现在客户端脚本与服务器之间的数据交互过程 ...

  3. [Javascript]XMLHttpRequest对象实现下载进度条

    摘要 可以通过设置一个XMLHttpRequest对象的responseType属性来改变一个从服务器上返回的响应的数据类型.可用的属性值为空字符串 (默认), "arraybuffer&q ...

  4. JavaScript——XMLHttpRequest 家族

    https://www.zhangxinxu.com/wordpress/2013/10/understand-domstring-document-formdata-blob-file-arrayb ...

  5. [JavaScript] XMLHttpRequest记录

    XMLHttpRequest 使用 XMLHttpRequest 对象可以和服务器进行交互,可以获取到数据,而无需让整个页面进行刷新.这样 web 页面可以做到只更新局部页面,降低了对用户操作的影响. ...

  6. [javascript]XMLHttpRequest GET/SET HTTP头与改变HTTP METHOD示例代码

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. directly receive json data from javascript in mvc

    if you send json data to mvc,how can you receive them and parse them more simply? you can do it like ...

  8. Operate blob data in Oracle via C#

    oracle table: CREATE TABLE "SCOTT"."TEST_BLOB"    (    "NAME" VARCHAR2 ...

  9. javascript XMLHttpRequest 对象的open() 方法参数说明

    下文是从w3c上摘录下来的,其中参数 method 说明的很简短,不是很理解,所以又找了些资料作为补充.文中带括号部分. XMLHttpRequest.open() 初始化 HTTP 请求参数 语法o ...

随机推荐

  1. Python：迭代器

    迭代器:可以被next()函数调用并不断返回下一个值的对象称为迭代器. 可迭代对象:可以直接作用于for循环的对象. 基本方法:iter()和next() 迭代器创建: 例1: list = ['a' ...

  2. 在sqlserver存储过程中给in参数传带逗号值的办法，如传'1','2','3'这样的

    最近在一项目修改中,要在存储过程中给in参数传值,语句写的也对,但怎么执行都得不出结果,如果把这语句直接赋值.执行,却能得出结果,很是奇怪,如: 直接执行select schoolname from ...

  3. coreseek实战(一)：windows下coreseek的安装与测试

    coreseek实战(一):windows下coreseek的安装与测试 网上关于 coreseek 在 windows 下安装与使用的教程有很多,官方也有详细的教程,这里我也只是按着官方提供的教程详 ...

  4. 如何将windows server 2008R2打造成桌面系统

    >在工作中有没有遇到这样的情况,因某些应用需要使用到服务器版系统,为了方便就将自己的机器安装成服务器版,这样一来客户版系统的易用性和更好的体验就不能用了,有木有--呵呵,下面以windows s ...

  5. centos下 redis安装配置及简单测试

    1:安装redis(使用的的环境是centos6.7 redis-2.6.14) 将redis-2.6.14.tar.gz文件拷贝到/usr/local/src 目录下 解压文件  tar zxvf ...

  6. Delphi初学者,向万一老师致敬

    今天首开博客园... 刚开始学习Delphi难免诸多不懂... 感谢万能的万一老师...

  7. Windows 打印控件

    Windows窗体的PrintDocument组件用于设置一些属性,这些属性说明,在基于Windows的应用程序中要打印说明内容以及打印文档的能力,可将它与PrintDialog组件一起使用来控制文档 ...

  8. LeetCode OJ--Swap Nodes in Pairs

    https://oj.leetcode.com/problems/swap-nodes-in-pairs/ 链表的处理 /** * Definition for singly-linked list. ...

  9. C++字符转码

    wchar_t* U8ToUnicode(char* szU8) { //UTF8 to Unicode //由于中文直接复制过来会成乱码,编译器有时会报错,故采用16进制形式 //char* szU ...

  10. 新浪微博SDK的使用

    花了两天时间研究了一下新浪微博SDK,遇到了不少问题,有必要整理一下 1.首先下载下weiboSdk,导入weiboSDKD和weiboSDKDemo两个项目,这时发现导入的weiboSDKDemo项 ...