How to read special characters from .csv files in JavaScript - javascript

I want to read .csv files which contains special characters (polish language).
I'm using ExcelJs to read .csv:
var workbook = new Excel.Workbook();
workbook.csv.readFile(uploadsPath + "/" + filename, {delimiter: ';'})
.then(function (worksheet) {
var worksheet = workbook.getWorksheet(1);
console.log(worksheet.getRow(3).getCell(7).value);
});
}
With this code I'm getting "Wroc�aw" instead of "Wrocław".
I tried using encoding:
var workbook = new Excel.Workbook();
workbook.csv.readFile(uploadsPath + "/" + filename, {encoding: 'utf-16le'})
.then(function (worksheet) {
var worksheet = workbook.getWorksheet(1);
console.log(worksheet.getRow(3).getCell(7).value);
});
}
But then I'm getting this error:
TypeError [ERR_INVALID_ARG_TYPE]: The "buf" argument must be one of type Buffer, TypedArray, or DataView. Received type object
How to deal with it?

Ok, I found a simple solution.
I created function
function changeEncoding(path) {
var buffer = fs.readFileSync(path);
var output = iconv.encode(iconv.decode(buffer, "win1250"), "utf-8");
fs.writeFileSync(path, output);
}
I simply reading file, and with the help of iconv-lite, firstly decoding from win1250 and then saving the file with utf-8 encoding.

First I think ł is a utf-8.
Try printing it in the browser, it may be the console that make it look like this

Related

Unable to produce image from base64 in nodjs

This is byte array response I am getting from google api contact-photo:
console.log('byteArray: ', res1.body);
����JFIF��``"����? !1AQaq2B���"#RT����br��3����������0 !1A2Qaq�"��BRS�����
?���Kѐ�V��,���fu0�AկQ�w���y�
x��i�|��F?���;҆�X����������(+:s��iud���c�Gf�e7�jI�;N�d�%�f����+�Uh4q;Ĭ!9ȨD��[��5�ކ�;h��gCt�͌��و1J��q�a��S��^�V��R�����U��K6�<��"�U��~"u�|Q
ڵ��G���;}�ђ׊��<���sX���>j���hk���~+�^����3�q4��P؝�oZ������4��P{O-j�]�d�c��pG��<7��Q������zd{n��|�`�mɊ��SN�D����}�Hv��0PY�<\�#�T�k!0�R(�Um�n��e�>�a욶˽�8P����{�)���"�
�4��}����6�`���T��!wY�� ��4�y�����+�A]U�M�ֻ⼪�d�N��EcQ`a�u�R��
�
Z"�e/���;-�vL�<c���IH"W2Ga���Ӄ⬨�cݻ#q��c�Y䣃F�G�$�0:�z�" 1��
�S�R�WCh��a���#%#��$�i�y�
u��[�6Ή����(c�Sw˻�G��X3����R��n'�m+>����'
�/;�%�k�4��Z�/l^�z�/l^�z��Z�}k^��!������O����������Dzx�"��>��û#>�#\~{�L-D�k��T�L�����({�TAr9����g}׎��y�{Լ�.�у�8���^��6��"9+��k��K�V�6�����p�¦�Y�~%b�F�lX����_���v����_�O����A�+�G��e]Q*���z��G|�Y{��f��Y�CI�qu*p�v�T�Z�%*R�Kx��c��Is�D�Y�-���O$��!�`��4M���VX�#v�g��U�̦��2E�W��s�7=}z#��Ԯ� c���t^��n|R2H΋�� |�����w�k�9��ٵ�o1�U��nC�r#���7���wZ��-�!n����v�p���P�h_dR�����O5�ޟ�
�*"̙����7-rr�{��<��3��#O�S;:/~�"f~Ϋ;IǸ,�V�[K�\���՗c���d4`6��ѣ��Õ]<ϚN��<��r/Fug<֧���ӢуZ�>z�Cܟ{'c��ˏO��jB��o �����c5�:�6:H�Ώ�c�S<�}{���U_c+�T��D����JY�����=v�&5� �ג3䒮i�Wq�#�$J �ǖ+��4"�FZ��ʗ���ݹ�E�]tV��
!� ��H�Op��)�&���P۷��'�;S�������#�!��/X��GO��iC�8>ȅ:���`$���H��m
I am trying to convert to base64 in nodejs:
base64Image = new Buffer.from(res1.body).toString('base64');
console.log("data:image/png;base64," + base64Image;)
which produces the following base64:
'data:image/png;base64,77+977+977+977+9ABBKRklGAAEBAAABAAEAAO+/ve+/vQDvv70ABQMEDw8NDQ0NEA8ODxANDhAPDw0NDw0QEA8NDg0NDg0NDw8NEA0NDw4NDQ0NFQ0PEhETExMNDRYYFhIYEBITEgEFBQUHBgcPCQkPHBUSFR0VHx0XGB4WHRcXFRUXFR0XGB0dFxUVFRUXFRUXFRUVFRUVFRUXFRUeFRUVFRUVFRUe77+977+9ABEIAGAAYAMBIgACEQEDEQHvv73vv70AHAAAAQQDAQAAAAAAAAAAAAAAAQUGBwgAAgME77+977+9AD8QAAEDAQMIBQkGBwEAAAAAAAEAAgMRBAchBQYSMUFRYXEyQu+/ve+/ve+/vRYiI1JU77+977+977+977+9ExRicu+/ve+/vTPvv73vv73vv73vv73vv73vv70X77+977+9ABwBAAICAwEBAAAAAAAAAAAAAAUGBAcBAggDAO+/ve+/vQAwEQABBAECAwYDCQAAAAAAAAABAAIDBBEFIRIxQQYyUWFx77+9Iu+/ve+/vRQVFkJSU++/ve+/ve+/ve+/ve+/vQAMAwEAAhEDEQA/AO+/ve+/ve+/vUvRkO+/vVbvv73vv70s77+977+977+9ZnUcMO+/vUHVr1Hvv71377+977+977+9ee+/vQt477+977+9ae+/vXzvv73vv70RRj/vv73vv73vv7070obvv71Y77+977+977+977+977+977+977+977+977+977+9KCs6c++/ve+/vWl1ZO+/ve+/ve+/vWMO77+9R2bvv71lNxzvv71qSe+/vTtO77+9ZO+/vSUE77+9Zu+/ve+/vR8A77+977+9K++/vVVoNBxxO8SsIQIWOcioRO+/ve+/vQNb77+9AO+/vTXvv73ehu+/vTto77+977+9ZxxDdO+/vc2M77+977+92YgxSu+/vRHvv71x77+9Ye+/ve+/vVPvv73vv71e77+9Vu+/vQjvv73vv71S77+9f++/ve+/ve+/vQ/vv71V77+977+9Szbvv70877+977+9Iu+/vVXvv73vv70YBn4ide+/vXxRCu+/ve+/vWPvv71G77+9SW9a0KlY77+977+977+9NO+/ve+/ve+/ve+/vVzvv73vv71dS3Dvv70zSyfvv70oI++/vUfvv70c1oBe77+9ZO+/ve+/ve+/vWbvv71GVT0jQ1xAOe+/vVHvv73vv71n77+93aDvv704z6bvv73vv73vv73vv71tf++/ve+/ve+/vWZxJO+/vWpNcTvvv73vv73vv71MV++/ve+/ve+/ve+/vSvvv70NHNq177+977+9R++/ve+/ve+/vTt977+90ZLXihHvv73vv70SPO+/ve+/vRfvv71zWO+/ve+/ve+/vT5q77+977+977+9aGvvv70Y77+977+9fivvv71e77+977+977+977+9M++/vXE077+977+9UB3Yne+/vW9a77+977+9G++/ve+/ve+/ve+/vTTvv73vv71QDntPLWrvv71d77+9ZO+/vWPvv70AA++/vXAGR++/ve+/vTw3Ae+/vRDvv71R77+9He+/ve+/ve+/ve+/ve+/vXpke27vv73vv71877+9YO+/vW3Jigfvv73vv71TTu+/vUTvv73vv73vv73vv71977+9SHYb77+977+9MFBZ77+9PFzvv70j77+9VO+/vWsRITDvv71SKO+/vQBVbe+/vW7vv73vv71l77+9Pu+/vWHsmrbLve+/vThQ77+977+9H++/ve+/vXvvv70p77+977+977+9Iu+/vQvvv73vv73vv707I34sPCvvv73vv71pQe+/ve+/ve+/ve+/vSHvv71u1a1dZu+/vVdl77+9H++/vXHvv73vv70N77+9NO+/vQ7vv71977+977+977+977+9Nu+/vWDvv73vv73vv71U77+977+9IXdZ77+9He+/vSDvv70D77+9NO+/vXkY77+977+977+977+9Au+/vSvvv71BXVXvv71N77+91rsG4ryq77+9ZATvv71O77+977+9RWNRYGHvv71177+9Uu+/vQvvv70LWiLvv71lLwDvv70a77+977+9Oy3vv712TO+/vTxj77+977+9HO+/vUlIIlcyR2Hvv73vv73vv73Tg+KsqO+/vWPduyNx77+977+9Y++/vVnko4NG77+9R++/vSTvv70wOu+/vXrvv70iCQ8x77+977+9DO+/vVPvv71S77+9V0No77+977+9Ye+/ve+/ve+/vUAlI++/ve+/vSTvv71p77+9ee+/vQt177+977+9W++/vTbOie+/ve+/ve+/ve+/vShj77+9BlN3y7sf77+9R++/ve+/vVgz77+977+977+9Ee+/vQBS77+977+9bifvv71tKz7vv73vv73vv73vv70nDO+/vQ4vO++/vSXvv71r77+9NO+/ve+/vVrvv70vbF7vv70feu+/vS9sXu+/vR9677+977+9Wu+/vX1rXu+/ve+/vSHvv73vv73vv73vv73vv73vv71P77+9Fe+/ve+/ve+/ve+/ve+/vRHvv73vv73vv73vv73Hsnjvv70i77+977+9Pu+/ve+/vcO7IxAZDz7vv70jXH5777+9TC1E77+9a++/ve+/vR5U77+9TO+/ve+/vU8977+9Se+/ve+/vVxRHXkk77+9Me+/vSc877+977+9Pe+/ve+/ve+/ve+/ve+/vQB1Uu+/vWLvv70N77+977+977+9KHsS77+9VEFyOe+/ve+/ve+/ve+/vWd9G9eO77+977+9Dgd577+9e9S877+9Lu+/vdGD77+9OO+/ve+/ve+/vQVe77+977+9Nu+/ve+/vSI5GSvvv73vv71r77+977+9S++/vVbvv70277+977+977+977+977+9cO+/vcKm77+9We+/vX4lYu+/vUbvv71sWO+/vRfvv73vv73vv71f77+977+9D++/vXbvv73vv73vv73vv71f77+9T++/ve+/ve+/ve+/vRgaQe+/vSvvv71H77+977+9ZV1RKu+/vRvvv73vv71677+977+9R3zvv71Ze++/vQbvv71m77+977+9We+/vQdDSe+/vXF1KnDvv71277+9VO+/vVrvv70XJREwHO+/vQBKNO+/vWzvv70z77+9yZbvv715Ru+/ve+/ve+/vSLvv70177+9Elzvv70HEkAI3Kfvv73vv73vv70NGSpS77+9S3jvv73vv71j77+977+9SXMG77+9HUTvv70UWe+/vS3vv73vv73vv71PJO+/ve+/vSHvv70FYO+/ve+/vTRN77+9H++/ve+/vVZY77+9QB1277+9Z++/ve+/vVXvv73Mphjvv73vv70XMkXvv71X77+977+9c++/vTc9fXoj77+977+91K7vv70gY++/ve+/ve+/vXRe77+977+9bnxSMkjOi++/ve+/vSB8DwPvv73vv73vv73vv73vv71377+9a++/vTnvv70H77+9A9m177+9bzHvv71V77+977+9bkPvv71yQO+/ve+/vRPvv70eNx3vv73vv73vv713FFrvv73vv70t77+9IRpu77+977+977+977+9du+/vXDvv73vv73vv71Q77+9aF8UZFLvv73vv73vv70O77+9Bu+/vU8SNe+/vd6f77+9DO+/ve+/vTxV77+977+977+977+9De+/vQAqIsyZ77+9GxTvv70F77+977+9Ny1ychLvv71777+9Fe+/vTzvv73vv70VM++/ve+/vSNP77+9ElM7Oi9+77+9GCIAZn7OqztJx7gs77+9VgHvv71bS3YI77+9XO+/ve+/ve+/vdWXY++/ve+/ve+/vWQ0AGA277+977+90aPvv73vv70Zw5VdPM+aTu+/ve+/vTwA77+977+9chgvRnVnPNan77+977+977+906LRg1oP77+9Pnrvv71D3J97JxVjGe+/ve+/vcuPTwTvv73vv71qQu+/ve+/vW8g77+977+977+977+977+9YzXvv70677+9NjpI77+9zo/vv71j77+9Uzzvv719e++/ve+/ve+/vSzvv73vv73vv70abx7vv71fONeq3qt8e1Ftfu+/vWtVIHfvv73vv71aae+/ve+/ve+/vQ8A77+9FzVC77+977+9dsau77+9We+/vTXvv71Ix73vv73vv70AVTYW77+9Xu+/vVZLE2QYKe+/ve+/vUZa77+977+9ypfvv73vv73vv73duRDvv71F77+9XXRW77+977+9DSLvv73vv70gee+/ve+/ve+/vWHvv70UJe+/ve+/ve+/vWjvv73vv73vv73vv73vv709du+/vSYeNRrvv70aIO+/vdeSM+SSrmnvv71Xce+/vSPvv70kSiACIO+/vceWKxfvv70d77+9YAg0IhYNVV9jK++/vVQJRO+/ve+/vRXvv73vv71KWQshTWh277+9Me+/vU4gUe+/ve+/ve+/vRTHmBdI77+977+9Ze+/vREj77+9Ie+/ve+/vQ4dL1jvv73vv71HT++/ve+/vWlD77+9OD7IhToT77+977+977+9YCQb77+977+977+9SO+/ve+/vW0NIe+/vSDvv70b77+9SO+/vU9w77+9Bu+/vSnvv70mUQjvv73vv70A77+9BRdQEdu377+977+9Jxzvv707U++/ve+/ve+/ve+/ve+/ve+/ve+/vQ==',
However, assigning this to <img src="base64 data here"/> doesn't generate image.
Here is the google api example: https://developers.google.com/google-apps/contacts/v3/#retrieving_a_contacts_photo
What am I doing wrong?
JFIF suggests you're actually converting a .jpg file, not a .png.
Make sure the file type (e.g. .png) matches the Mime type (e.g. "image/png").
Also consider specifying charset.
SUGGESTED CHANGE:
base64Image = new Buffer.from(res1.body).toString('base64');
console.log("data:image/jpeg;charset=utf-8;base64," + base64Image;)
<= Assuming it's really a jpeg file
Don't forget to make the corresponding change in your HTML, too...
when you try to do only get a request without specifying the encoding type for an image which is coming from the third party, then the response of the body will be the raw data which you are getting in bytearray variable , so you have add header encoding: "binary" so the response will come in binary format and then you use Buffer and BUffer.from to convert that binary data to base64 and use it in your <img src"data:image/png;base64,yourbase64data"
function getImage(imageUrl) {
var options = {
url: `${imageUrl}`,
encoding: "binary"
};
request.get(options, function (err, resp, body) {
if (err) {
reject(err);
} else {
var prefix = "data:" + resp.headers["content-type"] + ";base64,";
var img = new Buffer(body.toString(), "binary").toString("base64");// var img = new Buffer.from(body.toString(), "binary").toString("base64");
dataUri = prefix + img;
console.log(dataUri);
}
})
}
when use promise
function getImage(imageUrl) {
var options = {
url: `${imageUrl}`,
encoding: "binary"
};
return new Promise(function (resolve, reject) {
request.get(options, function (err, resp, body) {
if (err) {
reject(err);
} else {
var prefix = "data:" + resp.headers["content-type"] + ";base64,";
var img = new Buffer(body.toString(), "binary").toString("base64");// var img = new Buffer.from(body.toString(), "binary").toString("base64");
dataUri = prefix + img;
console.log(dataUri);
resolve(dataUri);
}
})
})}
there is one node module also for this form where i got the solution https://www.npmjs.com/package/imageurl-base64
if you want to read the image form your local disk the fs module help you
var prefix = "data:" + "content-type" + ";base64,";
img: fs.readFileSync(`pathtothelocalimage`, 'base64')
//img: fs.readFile(`pathtothelocalimage`, 'base64')
dataUri = prefix + img;

Convert Blob data to Raw buffer in javascript or node

I am using a plugin jsPDF which generates PDF and saves it to local file system. Now in jsPDF.js, there is some piece of code which generates pdf data in blob format as:-
var blob = new Blob([array], {type: "application/pdf"});
and further saves the blob data to local file system. Now instead of saving I need to print the PDF using plugin node-printer.
Here is some sample code to do so
var fs = require('fs'),
var dataToPrinter;
fs.readFile('/home/ubuntu/test.pdf', function(err, data){
dataToPrinter = data;
}
var printer = require("../lib");
printer.printDirect({
data: dataToPrinter,
printer:'Deskjet_3540',
type: 'PDF',
success: function(id) {
console.log('printed with id ' + id);
},
error: function(err) {
console.error('error on printing: ' + err);
}
})
The fs.readFile() reads the PDF file and generates data in raw buffer format.
Now what I want is to convert the 'Blob' data into 'raw buffer' so that I can print the PDF.
If you are not using NodeJS then you should know that the browser does not have a Buffer class implementation and you are probably compiling your code to browser-specific environment on something like browserify. In that case you need this library that converts your blob into a Buffer class that is supposed to be as perfectly equal to a NodeJS Buffer object as possible (the implementation is at feross/buffer).
If you are using node-fetch (not OP's case) then you probably got a blob from a response object:
const fetch = require("node-fetch");
const response = await fetch("http://www.stackoverflow.com/");
const blob = await response.blob();
This blob is an internal implementation and exists only inside node-fetch or fetch-blob libraries, to convert it to a native NodeJS Buffer object you need to transform it to an arrayBuffer first:
const arrayBuffer = await blob.arrayBuffer();
const buffer = Buffer.from(arrayBuffer);
This buffer object can then be used on things such as file writes and server responses.
For me, it worked with the following:
const buffer=Buffer.from(blob,'binary');
So, this buffer can be stored in Google Cloud Storage and local disk with fs node package.
I used blob file, to send data from client to server through ddp protocol (Meteor), so, when this file arrives to server I convert it to buffer in order to store it.
var blob = new Blob([array], {type: "application/pdf"});
var arrayBuffer, uint8Array;
var fileReader = new FileReader();
fileReader.onload = function() {
arrayBuffer = this.result;
uint8Array = new Uint8Array(arrayBuffer);
var printer = require("./js/controller/lib");
printer.printDirect({
data: uint8Array,
printer:'Deskjet_3540',
type: 'PDF',
success: function(id) {
console.log('printed with id ' + id);
},
error: function(err) {
console.error('error on printing: ' + err);
}
})
};
fileReader.readAsArrayBuffer(blob);
This is the final code which worked for me. The printer accepts uint8Array encoding format.
Try:
var blob = new Blob([array], {type: "application/pdf"});
var buffer = new Buffer(blob, "binary");

Node base64 encode doesn't give whole string

Good day,
I am having a weird issue with Node, I am encoding a file as Base64 and albeit it works for most of my PDFs that I am encoding, one in particular doesn't output the whole base64 string.
The actual b64 string starts like this: "JVBERi0xLjMKJf////8KNiAwIG9i..." but I only get "JVBERi0xLjMK"
Here is my code:
function sendPDF() {
// Grab the final PDF
require('fs').readFile(transaction.deliverable, function (err, data) {
if (err) {
console.log(err);
log(2, "Couldn't read: " + transaction.deliverable);
} else {
transaction.deliverable = new Buffer(data, 'binary').toString('base64');
//transaction.deliverable = data.toString('base64');
console.log(transaction.deliverable);
}
The commented out line was another attempt. The transaction structure is:
function Transaction(snapshot) {
var data = snapshot.val();
this.tid = snapshot.key();
this.request = data.request;
this.pages = [];
this.fileCount = 0;
this.deliverable = null;
this.fileName = "";
}
This transaction simple stores some information that I pull from Firebase however the important var, .deliverable is a string to the path of the PDF I need to encode and send.
I don't get any read errors when this happens, and the next transaction goes through this code block just fine, giving a full base64 string.
I was curious if my toString() was interpolating the base64 string, but then I thought I would have had larger problems earlier.
Any ideas? I can put this on hold and move on with my work but I would love to fix this.. Thank you.

How to create File object from Blob?

DataTransferItemList.add allows you to override copy operation in javascript. It, however, only accepts File object.
Copy event
The code in my copy event:
var items = (event.clipboardData || event.originalEvent.clipboardData);
var files = items.items || items.files;
if(files) {
var blob = Blob.fromDataURL(_this.editor.selection.getSelectedImage().toDataURL("image/png"));
files.add(blob);
}
The error in chrome:
Uncaught TypeError: Failed to execute add on DataTransferItemList: parameter 1 is not of type File.
Trying the new File(Blob blob, DOMString name)
In Google Chrome I tried this, according to the current specification:
var blob = Blob.fromDataURL(_this.editor.selection.getSelectedImage().toDataURL("image/png"));
var file = new File(blob, "image.png");
Problem here is, that Google Chrome doesn't stick to specifications very much.
Uncaught TypeError: Failed to construct File: Illegal constructor
Neither does Firefox in this case:
The method parameter is missing or invalid.
Trying the new File([Mixed blobParts], DOMString name, BlobPropertyBag options)
Solution suggested by #apsillers doesn't work too. This is non stadard method used (but useless) in both Firefox and Chrome.
Binary data
I tried to avoid blob, but the file constructor failed anyway:
//Canvas to binary
var data = atob( //atob (array to binary) converts base64 string to binary string
_this.editor.selection.getSelectedImage() //Canvas
.toDataURL("image/png") //Base64 URI
.split(',')[1] //Base64 code
);
var file = new File([data], "image.png", {type:"image/png"}); //ERROR
You can try that in console:
Chrome <38:
Chrome >=38:
Firefox:
Blob
Passing Blob is probably correct and works in Firefox:
var file = new File([new Blob()], "image.png", {type:"image/png"});
Firefox:
Chrome <38:
Chrome >=38:
Q: So how can I make File from Blob?
Note: I added more screenshots after #apsillers reminded me to update Google Chrome.
The File constructor (as well as the Blob constructor) takes an array of parts. A part doesn't have to be a DOMString. It can also be a Blob, File, or a typed array. You can easily build a File out of a Blob like this:
new File([blob], "filename")
This was the complete syntax which I had to use to convert a blob into a file, which I later had to save to a folder using my server.
var file = new File([blob], "my_image.png",{type:"image/png", lastModified:new Date().getTime()})
this works with me, from canvas to File [or Blob], with filename!
var dataUrl = canvas.toDataURL('image/jpeg');
var bytes = dataUrl.split(',')[0].indexOf('base64') >= 0 ?
atob(dataUrl.split(',')[1]) :
(<any>window).unescape(dataUrl.split(',')[1]);
var mime = dataUrl.split(',')[0].split(':')[1].split(';')[0];
var max = bytes.length;
var ia = new Uint8Array(max);
for (var i = 0; i < max; i++) {
ia[i] = bytes.charCodeAt(i);
}
var newImageFileFromCanvas = new File([ia], 'fileName.jpg', { type: mime });
Or if you want a blob
var blob = new Blob([ia], { type: mime });

File API - Blob to JSON

I'm trying to do some experiment with HTML5, WebSocket and File API.
I'm using the Tomcat7 WebSocket implementation.
I'm able to send and received text messages from the servlet. What I want to do now is to send from the servlet to the client JSON objects, but I want to avoid text message in order to skip the JSON.parse (or similar) on the client, so I'm trying to send binary messages.
The servlet part is really simple:
String s = "{arr : [1,2]}";
CharBuffer cbuf = CharBuffer.wrap(s);
CharsetEncoder encoder = Charset.forName("UTF-8").newEncoder();
getWsOutbound().writeBinaryMessage(encoder.encode(cbuf));
getWsOutbound().flush();
After this message, on the client I see that I received a binary frame, that is converted to a Blob object (http://www.w3.org/TR/FileAPI/#dfn-Blob).
The question is: is it possible to get the JSON object from the Blob?
I took a look at the FileReader interface (http://www.w3.org/TR/FileAPI/#FileReader-interface), and I used code like this to inspect what the FileReader can do (the first line creates a brand new Blob, so you can test on the fly if you want):
var b = new Blob([{"test": "toast"}], {type : "application/json"});
var fr = new FileReader();
fr.onload = function(evt) {
var res = evt.target.result;
console.log("onload",arguments, res, typeof res);
};
fr.readAsArrayBuffer(b);
using all the "readAs..." methods that I saw on the File Reader implementation (I'm using Chrome 22). Anyway I didn't find something useful.
Did you have any suggestion? Thanks.
You should have tried readAsText() instead of readAsArrayBuffer() (JSON is text in the end).
You've also missed to stringify the object (convert to JSON text)
var b = new Blob([JSON.stringify({"test": "toast"})], {type : "application/json"}),
fr = new FileReader();
fr.onload = function() {
console.log(JSON.parse(this.result))
};
fr.readAsText(b);
To convert Blob/File that contains JSON data to a JavaScript object use it:
JSON.parse(await blob.text());
The example:
Select a JSON file, then you can use it in the browser's console (json object).
const input = document.createElement("input");
input.type = "file";
input.accept = "application/json";
document.body.prepend(input);
input.addEventListener("change", async event => {
const json = JSON.parse(await input.files[0].text());
console.log("json", json);
globalThis.json = json;
});
What you're doing is conceptually wrong. JSON is a string representation of an object, not an object itself. So, when you send a binary representation of JSON over the wire, you're sending a binary representation of the string. There's no way to get around parsing JSON on the client side to convert a JSON string to a JavaScript Object.
You absolutely should always send JSON as text to the client, and you should always call JSON.parse. Nothing else is going to be easy for you.
let reader = new FileReader()
reader.onload = e => {
if (e.target.readyState === 2) {
let res = {}
if (window.TextDecoder) {
const enc = new TextDecoder('utf-8')
res = JSON.parse(enc.decode(new Uint8Array(e.target.result))) //转化成json对象
} else {
res = JSON.parse(String.fromCharCode.apply(null, new Uint8Array(e.target.result)))
}
console.info('import-back:: ', res)
}
}
reader.readAsArrayBuffer(response)

Categories

Resources