Filesaver.js:如何编写包含二进制数据的Blob?

//字符串到ArrayBuffer函数str2ab(str){var buf = new ArrayBuffer(str.length);//每个字符2个字节var bufView = new Uint8Array(buf);对于(var i = 0，strLen = str.length; i< strLen; i ++){bufView [i] = str.charCodeAt(i);}var result = new Uint8Array(bufView.buffer);返回结果；} * 2:从该答案中获得了numberToArrayBuffer解决方案，已根据我的需要进行了修改！ //.............编号为ArratBuffer//* 2//整数到ArrayBuffer-4位函数int2ArrBuf(value){const view = new DataView(new ArrayBuffer(4))for(var index = 3; index> = 0; --index){view.setUint8(索引，值％256)值=值>>8;}var int = new Uint8Array(view.buffer);返回int}//相反的顺序函数Xint2ArrBuf(value){const view = new DataView(new ArrayBuffer(4))for(var index = 0; index< = 3; ++ index){view.setUint8(索引，值％256)值=值>>8;}var int = new Uint8Array(view.buffer);返回int}//......................//一位长整数函数strsize(value){const view = new DataView(新ArrayBuffer(1))view.setUint8(0，值％256)值=值>>8;var result = new Uint8Array(view.buffer);返回结果} ="a:=" 从这一个开始，弄清楚如何保存点坐标 //指向ArrayBuffer-3x 8位函数Pt2ArrBuf(x，y，z){var float32 = new Float32Array(3);float32 [0] = x;float32 [1] = y;float32 [2] = z;var f = new Float64Array(float32);var pt = new Int8Array(f.buffer);返回pt;} * 4:准备数据序列并进行连接TypedArrays //在这里，我按照需要的方式编写文件...const binaryData = [int2ArrBuf(9)，strsize(8)，str2ab('< POINTS>')，int2ArrBuf(3)，Xint2ArrBuf(2)，strsize(1)，str2ab('A')，Pt2ArrBuf(10.5,10,10)，Xint2ArrBuf(2)，strsize(1)，str2ab('B')，Pt2ArrBuf(-20,10,0.7)，int2ArrBuf(10)，strsize(9)，str2ab('</POINTS>')];//在这里，我将许多TypedArrays合并为一个...const mergedInt8Array = new Int8Array(binaryData.map(typedArray => [... new Int8Array(typedArray.buffer)]).flat());console.log(mergedInt8Array); * 5:大卫的Codepen * 6:对Blob语法的更正 //* 5:通过FileSaver.js直接下载var SaveButton = document.getElementById('save');SaveButton.addEventListener('click'，function(){var filename = document.getElementById("name").value;文件名+ ='.txt';var blob = new Blob([mergedInt8Array]，{type:"application/octet-stream"}});//* 6saveAs(blob，文件名);}); 此处是 Codepen 和解决方案.谢谢.I want to use fileSaver.js to click a button and save a binary blob (type: "application/octet-stream").But i don´t know how to save the blob the way i need it to be.The final file (example.mod) needs to have the following sequence:8 (the number of bytes for the next peace of information, integer number)<POINTS> (a tag name with 8 characters)3 (the number of points)[A,10.5,10,10] (a point: an array with a letter and 3 floating numbers)[B,20,10,0.7] (a point: an array with a letter and 3 floating numbers)[C,10,20.3,10] (a point: an array with a letter and 3 floating numbers)9 (the number of bytes for the next peace of information, integer number)</POINTS> (a tag name with 9 characters)I´ve found some examples saving "text/plain" or "image/png", but nothing that I could figure out how to apply in my case.I've made this CodePen showing what I´m trying to do, but the resulting file is not what expected!it returns a file like that (all the information is visible as if was a text file):8<POINTS>3A,10.5,10,10B,20,10,0.7C,10,20.3,109</POINTS>...but what I would like to get is the file writen in Bytes, something like this (when looked at in a text-editor):...or when read it as an ArrayBuffer I should get something like this result:Int8Array(119)[ 0: 0 1: 0 2: 0 3: 8 4: 60 5: 80 6: 79 7: 73 8: 78 9: 84 10: 83 11: 62 12: 3 13: 0 14: 0 15: 0 16: 2 17: 0 18: 0 19: 0 20: 1 21: 65 22: 0 23: 0 24: 0 25: 0 26: 0 27: 0 28: 37 29: 64 30: 0 31: 0 32: 0 33: 0 34: 0 35: 0 36: 36 37: 64 38: 0 39: 0 40: 0 41: 0 42: 0 43: 0 44: 36 45: 64 46: 2 47: 0 48: 0 49: 0 50: 1 51: 66 52: 0 53: 0 54: 0 55: 0 56: 0 57: 0 ​​58: 52 ​​59: 64 ​​60: 0 ​​61: 0 ​​62: 0 ​​63: 0 ​​64: 0 65: 0 66: 36 ​​67: 64 ​​68: 102 ​​69: 102 ​​70: 102 ​​71: 102 72: 102 ​​73: 102 ​​74: -26 ​​75: 63 76: 2 77: 0 ​​78: 0 79: 0 ​​80: 1 ​​81: 67 ​​82: 0 ​​83: 0 ​​84: 0 ​​85: 0 ​​86: 0 87: 0 ​​88: 36 ​​89: 64 ​​90: -51 ​​91: -52 ​​92: -52 ​​93: -52 ​​94: -52 ​​95: 76 96: 52 ​​97: 64 98: 0 ​​99: 0 100: 0 ​​101: 0 ​​102: 0 ​​103: 0 ​​104: 36 105: 64 ​​106: 0 107: 0 108: 0 ​​109: 9 ​​110: 60 ​​111: 47 ​​112: 80 ​​113: 79 ​​114: 73 ​​115: 78 ​​116: 84 ​​117: 83 ​​118: 62]PS: If you know how to get those results without using filesaver.js, that would work for me as well.Any help will be most appreciated!Thank you. 解决方案 Solved:After digging for a while found in different questions the bits and peaces i needed to put together a solution (not sure if is the best practice, but is working!)First I had to treat every kind of input (string, number(positive integer), number(signed floating real) in differnet ways to match the format I need in the file.*1: from here got the StingToArrayBuffer solution//string to ArrayBufferfunction str2ab(str) { var buf = new ArrayBuffer(str.length); // 2 bytes for each char var bufView = new Uint8Array(buf); for (var i = 0, strLen = str.length; i < strLen; i++) { bufView[i] = str.charCodeAt(i); } var result = new Uint8Array(bufView.buffer); return result;}*2: From that answer got the numberToArrayBuffer solution, modified to my needs!//.............number to ArratBuffer //*2//integer To ArrayBuffer - 4 bitsfunction int2ArrBuf(value) { const view = new DataView(new ArrayBuffer(4)) for (var index = 3; index >= 0; --index) { view.setUint8(index, value % 256) value = value >> 8; } var int = new Uint8Array(view.buffer); return int}//Reverse orderfunction Xint2ArrBuf(value) { const view = new DataView(new ArrayBuffer(4)) for (var index = 0; index <= 3; ++index) { view.setUint8(index, value % 256) value = value >> 8; } var int = new Uint8Array(view.buffer); return int}//......................//one bit long integerfunction strsize(value) { const view = new DataView(new ArrayBuffer(1)) view.setUint8(0, value % 256) value = value >> 8; var result= new Uint8Array(view.buffer); return result}*3: from this one, figure how to save the point coordinates//point To ArrayBuffer - 3x 8 bitsfunction Pt2ArrBuf(x,y,z){ var float32 = new Float32Array(3); float32[0] = x; float32[1] = y; float32[2] = z; var f = new Float64Array(float32); var pt = new Int8Array(f.buffer); return pt;}*4: preparing the data sequence and concatenating the TypedArrays//here I write the file the way i Need it to be...const binaryData = [ int2ArrBuf(9), strsize(8), str2ab('<POINTS>'), int2ArrBuf(3), Xint2ArrBuf(2), strsize(1), str2ab('A'), Pt2ArrBuf(10.5,10,10), Xint2ArrBuf(2), strsize(1), str2ab('B'), Pt2ArrBuf(-20,10,0.7), int2ArrBuf(10), strsize(9), str2ab('</POINTS>') ];//here I join the many TypedArrays into one...const mergedInt8Array = new Int8Array(binaryData.map(typedArray => [...new Int8Array(typedArray.buffer)]).flat());console.log(mergedInt8Array);*5: Codepen from David*6: Correction on the blob syntax//*5:direct download via FileSaver.jsvar SaveButton = document.getElementById('save');SaveButton.addEventListener('click', function () { var filename = document.getElementById("name").value; filename += '.txt'; var blob = new Blob([mergedInt8Array], { type: "application/octet-stream"}); //*6 saveAs(blob, filename);});Here is the Codepen with the Solution. Thank You. 这篇关于Filesaver.js:如何编写包含二进制数据的Blob?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！