Blob API及問題記錄

接上一篇<js建立下載文件>, 記錄核心部分 Blob 的API, >>傳送門 , 同時說下使用過程當中碰到的一個問題.html

先說問題:web

用Blob建立後綴爲.sql的文件, 內容是包含中文的文本, 結果生成的文本打開後中文部分顯示亂碼. 嘗試加了type後,仍是沒有改變. 後來想到會不會是由於.sql的mime類型問題, 因而先換成了application/stram的類型, 發現問題依舊.  後來換了個思路, type不變, 取巧把後綴換成了.txt, 結果問題就行了. 由於手上事情比較多, 苦惱之下只能先採起這個方法. 哪位朋友若是有更好的方法歡迎留言告訴我, 先謝謝.sql

<script>
    downloadFile("建立菜單SQL腳本.txt", response);

    function downloadFile(fileName, content) {
        var aLink = document.createElement('a');
        var blob = new Blob([content], { type: "text/plain" });
        var evt = document.createEvent("HTMLEvents");
        // initEvent 不加後兩個參數在FF下會報錯, 感謝 Barret Lee 的反饋
        evt.initEvent("click", false, false);
        aLink.download = fileName;
        aLink.href = URL.createObjectURL(blob);
        aLink.dispatchEvent(evt);
    }
</script>

 

Blob API:canvas

一個Blob對象就是一個包含有隻讀原始數據的類文件對象。Blob對象中的數據並不必定得是JavaScript中的原生形式。File接口基於Blob,繼承了Blob的功能,而且擴展支持了用戶計算機上的本地文件。api

建立Blob對象的方法有幾種,能夠調用Blob構造函數,還可使用一個已有Blob對象上的slice()方法切出另外一個Blob對象,還能夠調用canvas對象上的toBlob方法。數組

注: 須要注意的是,一些瀏覽器上的 slice()方法仍帶有前綴:Firefox 12以前的版本上爲 blob.mozSlice(),Safari上爲 blob.webkitSlice()
注: 一些瀏覽器提供了 BlobBuilder接口,但並非全部的瀏覽器都支持 BlobBuilder,並且現有的 BlobBuilder實現都是帶前綴的。更主要的是 BlobBuilder已經被廢棄,你應該儘量的使用 Blob構造函數來代替。

屬性Edit

屬性名     類型 描述
size        unsigned long long Blob對象中所包含數據的大小只讀。
type DOMString 一個字符串,代表該Blob對象所包含數據的MIME類型。若是類型未知,則該值爲空字符串。只讀。

構造函數Edit

Blob Blob(
  [optional] Array parts,
  [optional] BlobPropertyBag properties
);
參數
parts
一個數組,包含了將要添加到 Blob對象中的數據。數組元素能夠是任意多個的 ArrayBufferArrayBufferView (typed array), Blob,或者 DOMString對象。
properties
一個對象,設置 Blob對象的一些屬性。查看 BlobPropertyBag一節。

方法Edit

slice()

返回一個新的Blob對象,包含了源Blob對象中指定範圍內的數據瀏覽器

Blob slice(
  optional long long start,
  optional long long end,
  optional DOMString contentType
);

參數

start 可選
開始索引,能夠爲負數,語法相似於數組的 slice方法。默認值爲0。
end 可選
結束索引,能夠爲負數,語法相似於數組的 slice方法。默認值爲 最後一個索引
contentType 可選
新的 Blob對象的MIME類型,這個值將會成爲新的 Blob對象的 type屬性的值,默認爲一個空字符串

返回值

一個新的Blob對象,包含了源Blob對象中指定範圍內的數據app

注意

若是start參數的值比源Blob對象的size屬性的值還大,則返回的Blob對象的size值爲0,也就是不包含任何數據。ide

BlobPropertyBagEdit

一個包含有兩個屬性typeendings的對象。函數

type
設置該 Blob對象的 type屬性
endings(已廢棄)
對應於 BlobBuilder.append()方法的 endings參數。該參數的值能夠是"transparent"或者"native"。

Blob構造函數用法舉例Edit

下面的代碼:

var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
var oMyBlob = new Blob(aFileParts, { "type" : "text/xml" }); // the blob

等價於:

var oBuilder = new BlobBuilder();
var aFileParts = ["<a id=\"a\"><b id=\"b\">hey!<\/b><\/a>"];
oBuilder.append(aFileParts[0]);
var oMyBlob = oBuilder.getBlob("text/xml"); // the blob

BlobBuilder接口提供了另一種建立Blob對象的方式,但該方式如今已經廢棄,因此不該該再使用了。

例子:使用類型數組和Blob對象建立一個對象URLEdit

var typedArray = GetTheTypedArraySomehow();
var blob = new Blob([typedArray], {type: "application/octet-binary"}); // 傳入一個合適的MIME類型
var url = URL.createObjectURL(blob);
// 會產生一個相似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf這樣的URL字符串
// 你能夠像使用一個普通URL那樣使用它,好比用在img.src上。

瀏覽器兼容性Edit

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 5 4 10 11.10 5.1
slice()

21
10 webkit

13
5 moz
10 12 5.1 (534.29) webkit
Blob() constructor 20 13.0 (13.0) 10 12.10 6 (536.10)

 

注意:關於slice()的實現

slice()方法一開始使用length來做爲第二個參數,表示須要向新的Blob對象拷貝多少個字節。若是你指定的參數值start + length的值超過了源Blob對象的長度,則返回的Blob對象包含了從start索引到源Blob對象結束索引處的全部數據

這個版本的slice()實現於Firefox 4WebKit,以及 Opera 11.10中。但是,因爲這個語法和咱們經常使用的Array.slice()以及String.slice()語法不一樣,因此已被廢棄。Gecko和WebKit目前支持的是新版的slice語法。

從Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10)和Chrome 21開始,slice()去掉了前綴。

Gecko備註

在Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9)以前,slice()方法有個bug,就是參數startend的值不能超出64位無符號數字範圍,現已修復。

相關連接Edit

相關文章
相關標籤/搜索