so due to some security reason i want to add some extra text to .ts file in the begining of so when parsing it causes buffering issues
to fix this i decided to removed that 'extra' text i added before processing the segment issue is i dont know how to manipulate arraybuffer so i can remove that text since i am not that knowledgable on js
I tried many things including just download hlsjs file directly then edit readystatechange
// >= HEADERS_RECEIVED
if (readyState >= 2) {
....
if (isArrayBuffer)
{
console.log(xhr.response);
var ress = xhr.response;
//console.log(ress.replace('FFmpeg',''));
var enc = new TextDecoder('ASCII');
var seg = enc.decode(ress);
//var binaryArray = new Uint8Array(this.response.slice(0)); // use UInt8Array for binary
//var blob = new Blob([seg], { type: "video/MP2T" });
var enc = new TextEncoder(); // always utf-8
var newww = enc.encode(enc.encode(seg));
var ddd = newww.buffer;
console.debug( newww );
console.debug( newww.buffer);
//dec = dec.replace('ÿØÿà �JFIF','') ;
//xhr.response = Array.from(newww) ;
data = ddd;
len = data.byteLength;
the idea was to convert arraybuffer to string remove that text then convert it back to arraybuffer
I'm trying to generate an excel file which contains emojis. After the excel file is generated and I opened it in google spreadsheet, the emojis can be shown properly. (in Numbers is fine too), please see the expected link.
However when I opened that file in Ms.excel: I got this:
actual
Here is data I passed to feedbackGenerator to produce excel file in the figure above:
const renderTableHeader = titleArray => {
let row = "";
for (let i in titleArray) {
row += titleArray[i] + ',';
}
row = row.slice(0, -1);
row += '\r\n';
return row;
}
const feedbackGenerator = (data) => {
let arrData = typeof data !== 'object' ? JSON.parse(data) : data;
let file = 'sep=,\r\n\n';
const headerArray = ['Date', 'Feedback'];
file += renderTableHeader(headerArray);
for (let i = 0; i < arrData.length; i++) {
let row = "";
for (var index in arrData[i]) {
row += '"' + arrData[i][index] + '",';
}
row.slice(0, row.length - 1);
file += row + '\r\n';
}
const fileName = `feedback.xls`
generateExcelFile(file, fileName)
};
const generateExcelFile = (file, fileName) => {
let uri = 'data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet ;charset=utf-8,' + encodeURIComponent(file);
let link = document.createElement("a");
link.href = uri;
link.style = "visibility:hidden";
link.download = fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
const data = [
{
Date: '10 Jul 2019 09:41',
Feedback: 'mencoba emoji 😊😊😊😄😄😂😂😂'
},
{
Date: '10 Jul 2019 09:41',
Feedback: 'test emoji lagi 😍😍😍✌🏿✌🏿😳😳😳'
}
]
// generate excel file
feedbackGenerator(data);
I expect the emoji to be shown properly. If it's shown as old emoji, then it's fine as long as it's not unknown chars.
expected
You do not generate an Excel file!
You generate a CSV file and give it the extension ".xls". Excel reports an error, if you try to open such a file. But Excel's default error handling is to open the file as CSV file. But Excel does not allow you to select the input encoding, if you open the file in this way.
Not being able to select the input encoding is your problem. This is what you get, if you open an UTF-8 input as ANSI:
sep=,
Date,Feedback
"10 Jul 2019 09:41","mencoba emoji 😊😊😊😄😄😂😂😂",
"10 Jul 2019 09:41","test emoji lagi ðŸ˜ðŸ˜ðŸ˜âœŒðŸ¿âœŒðŸ¿ðŸ˜³ðŸ˜³ðŸ˜³",
That is exactly what Excel does.
This means you have to encode your XLS labeled CSV file as ANSI. But this is not possible, because it is not possible to encode UTF-8 emojis in ANSI.
So the only option is to generate a CSV file and call it also CSV in order to import it in Excel. How to import a UTF-8 CSV is explained here. If you do so, the Emojis are rendered correctly:
how do I convert a UTF-8 string to Latin1 encoded string using javascript?
Here is what I am trying to do:
I get a file, split that in chunks by reading as arraybuffer
then, I parse the arraybuffer as string
and passing it to cryptoJS for hash computation using following code:
cryptosha256 = CryptoJS.algo.SHA256.create();
cryptosha256.update(text);
hash = cryptosha256.finalize();
It all works well for a text file. I get problems when using the code for hashing a non-text files (image/.wmv files). I saw in another blog and there the CryptoJS author requires the bytes to be sent using Latin1 format instead of UTF-8 and that's where I am stuck.
Not sure, how can I generate the bytes (or strings) using Latin1 format from arraybuffer in javascript?
$('#btnHash').click(function () {
var fr = new FileReader(),
file = document.getElementById("fileName").files[0];
fr.onload = function (e) {
calcHash(e.target.result, file);
};
fr.readAsArrayBuffer(file);
});
function calcHash(dataArray, file) {
cryptosha256 = CryptoJS.algo.SHA256.create();
text = CryptoJS.enc.Latin1.parse(dataArray);
cryptosha256.update(text);
hash = cryptosha256.finalize();
}
CryptoJS doesn't understand what an ArrayBuffer is and if you use some text encoding like Latin1 or UTF-8, you will inevitably lose some bytes. Not every possible byte value has a valid encoding in one of those text encodings.
You will have to convert the ArrayBuffer to CryptoJS' internal WordArray which holds the bytes as an array of words (32 bit integers). We can view the ArrayBuffer as an array of unsigned 8 bit integers and put them together to build the WordArray (see arrayBufferToWordArray).
The following code shows a full example:
function arrayBufferToWordArray(ab) {
var i8a = new Uint8Array(ab);
var a = [];
for (var i = 0; i < i8a.length; i += 4) {
a.push(i8a[i] << 24 | i8a[i + 1] << 16 | i8a[i + 2] << 8 | i8a[i + 3]);
}
return CryptoJS.lib.WordArray.create(a, i8a.length);
}
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
// Closure to capture the file information.
reader.onloadend = (function(theFile) {
return function(e) {
var arrayBuffer = e.target.result;
var hash = CryptoJS.SHA256(arrayBufferToWordArray(arrayBuffer));
var elem = document.getElementById("hashValue");
elem.value = hash;
};
})(f);
reader.onerror = function(e) {
console.error(e);
};
// Read in the image file as a data URL.
reader.readAsArrayBuffer(f);
}
}
document.getElementById('upload').addEventListener('change', handleFileSelect, false);
<script src="https://cdn.rawgit.com/CryptoStore/crypto-js/3.1.2/build/rollups/sha256.js"></script>
<form method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="upload" id="upload">
<input type="text" name="hashValue" id="hashValue">
</form>
You can extend this code with the techniques in my other answer in order to hash files of arbitrary size without freezing the browser.
how do I convert a UTF-8 string to Latin1 encoded string using javascript?
Here is what I am trying to do:
I get a file, split that in chunks by reading as arraybuffer
then, I parse the arraybuffer as string
and passing it to cryptoJS for hash computation using following code:
cryptosha256 = CryptoJS.algo.SHA256.create();
cryptosha256.update(text);
hash = cryptosha256.finalize();
It all works well for a text file. I get problems when using the code for hashing a non-text files (image/.wmv files). I saw in another blog and there the CryptoJS author requires the bytes to be sent using Latin1 format instead of UTF-8 and that's where I am stuck.
Not sure, how can I generate the bytes (or strings) using Latin1 format from arraybuffer in javascript?
$('#btnHash').click(function () {
var fr = new FileReader(),
file = document.getElementById("fileName").files[0];
fr.onload = function (e) {
calcHash(e.target.result, file);
};
fr.readAsArrayBuffer(file);
});
function calcHash(dataArray, file) {
cryptosha256 = CryptoJS.algo.SHA256.create();
text = CryptoJS.enc.Latin1.parse(dataArray);
cryptosha256.update(text);
hash = cryptosha256.finalize();
}
CryptoJS doesn't understand what an ArrayBuffer is and if you use some text encoding like Latin1 or UTF-8, you will inevitably lose some bytes. Not every possible byte value has a valid encoding in one of those text encodings.
You will have to convert the ArrayBuffer to CryptoJS' internal WordArray which holds the bytes as an array of words (32 bit integers). We can view the ArrayBuffer as an array of unsigned 8 bit integers and put them together to build the WordArray (see arrayBufferToWordArray).
The following code shows a full example:
function arrayBufferToWordArray(ab) {
var i8a = new Uint8Array(ab);
var a = [];
for (var i = 0; i < i8a.length; i += 4) {
a.push(i8a[i] << 24 | i8a[i + 1] << 16 | i8a[i + 2] << 8 | i8a[i + 3]);
}
return CryptoJS.lib.WordArray.create(a, i8a.length);
}
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
// Closure to capture the file information.
reader.onloadend = (function(theFile) {
return function(e) {
var arrayBuffer = e.target.result;
var hash = CryptoJS.SHA256(arrayBufferToWordArray(arrayBuffer));
var elem = document.getElementById("hashValue");
elem.value = hash;
};
})(f);
reader.onerror = function(e) {
console.error(e);
};
// Read in the image file as a data URL.
reader.readAsArrayBuffer(f);
}
}
document.getElementById('upload').addEventListener('change', handleFileSelect, false);
<script src="https://cdn.rawgit.com/CryptoStore/crypto-js/3.1.2/build/rollups/sha256.js"></script>
<form method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="upload" id="upload">
<input type="text" name="hashValue" id="hashValue">
</form>
You can extend this code with the techniques in my other answer in order to hash files of arbitrary size without freezing the browser.
I have a formatted PDF string that looks like
%PDF-1.73 0 obj<<< /Type /Group /S /Transparency /CS /DeviceRGB >> /Resources 2 0 R/Contents 4 0 R>> endobj4 0 obj<> streamx��R=o�0��+��=|vL�R���l�-��ځ,���Ge�JK����{���Y5�����Z˯k�vf�a��`G֢ۢ��Asf�z�ͼ��`%��aI#�!;�t���GD?!���<�����B�b��
...
00000 n 0000000703 00000 n 0000000820 00000 n 0000000926 00000 n 0000001206 00000 n 0000001649 00000 n trailer << /Size 11 /Root 10 0 R /Info 9 0 R >>startxref2015%%EOF
I am trying to open up this string in a new window as a PDF file. Whenever I use window.open() and write the string to the new tab it thinks that the text should be the contents of an HTML document. I want it to recognize that this is a PDF file.
Any help is much appreciated
Just for information, the below
window.open("data:application/pdf," + encodeURI(pdfString));
does not work anymore in Chrome. Yesterday, I came across with the same issue and tried this solution, but did not work (it is 'Not allowed to navigate top frame to data URL'). You cannot open the data URL directly in a new window anymore.
But, you can wrap it in iframe and make it open in a new window like below. =)
let pdfWindow = window.open("")
pdfWindow.document.write(
"<iframe width='100%' height='100%' src='data:application/pdf;base64, " +
encodeURI(yourDocumentBase64VarHere) + "'></iframe>"
)
var byteCharacters = atob(response.data);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var file = new Blob([byteArray], { type: 'application/pdf;base64' });
var fileURL = URL.createObjectURL(file);
window.open(fileURL);
You return a base64 string from the API or another source. You can also download it.
You might want to explore using the data URI. It would look something like.
window.open("data:application/pdf," + escape(pdfString));
I wasn't immediately able to get this to work, possible because formating of the binary string provided. I also usually use base64 encoded data when using the data URI. If you are able to pass the content from the backend encoded you can use..
window.open("data:application/pdf;base64, " + base64EncodedPDF);
Hopefully this is the right direction for what you need. Also note this will not work at all in IE6/7 because they do not support Data URIs.
window.open("data:application/pdf," + escape(pdfString));
The above one pasting the encoded content in URL. That makes restriction of the content length in URL and hence PDF file loading failed (because of incomplete content).
This one worked for me.
window.open("data:application/octet-stream;charset=utf-16le;base64,"+data64);
This one worked too
let a = document.createElement("a");
a.href = "data:application/octet-stream;base64,"+data64;
a.download = "documentName.pdf"
a.click();
I realize this is a pretty old question, but I had the same thing come up today and came up with the following solution:
doSomethingToRequestData().then(function(downloadedFile) {
// create a download anchor tag
var downloadLink = document.createElement('a');
downloadLink.target = '_blank';
downloadLink.download = 'name_to_give_saved_file.pdf';
// convert downloaded data to a Blob
var blob = new Blob([downloadedFile.data], { type: 'application/pdf' });
// create an object URL from the Blob
var URL = window.URL || window.webkitURL;
var downloadUrl = URL.createObjectURL(blob);
// set object URL as the anchor's href
downloadLink.href = downloadUrl;
// append the anchor to document body
document.body.appendChild(downloadLink);
// fire a click event on the anchor
downloadLink.click();
// cleanup: remove element and revoke object URL
document.body.removeChild(downloadLink);
URL.revokeObjectURL(downloadUrl);
});
An updated version of answer by #Noby Fujioka:
function showPdfInNewTab(base64Data, fileName) {
let pdfWindow = window.open("");
pdfWindow.document.write("<html<head><title>"+fileName+"</title><style>body{margin: 0px;}iframe{border-width: 0px;}</style></head>");
pdfWindow.document.write("<body><embed width='100%' height='100%' src='data:application/pdf;base64, " + encodeURI(base64Data)+"#toolbar=0&navpanes=0&scrollbar=0'></embed></body></html>");
}
I just want to add with #Noby Fujioka's response, Edge will not support following
window.open("data:application/pdf," + encodeURI(pdfString));
For Edge we need to convert it to blob and this is something like following
//If Browser is Edge
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
var byteCharacters = atob(<Your_base64_Report Data>);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var blob = new Blob([byteArray], {
type: 'application/pdf'
});
window.navigator.msSaveOrOpenBlob(blob, "myreport.pdf");
} else {
var pdfWindow = window.open("", '_blank');
pdfWindow.document.write("<iframe width='100%' style='margin: -8px;border: none;' height='100%' src='data:application/pdf;base64, " + encodeURI(<Your_base64_Report Data>) + "'></iframe>");
}
Based off other old answers:
escape() function is now deprecated,
Use encodeURI() or encodeURIComponent() instead.
Example that worked in my situation:
window.open("data:application/pdf," + encodeURI(pdfString));
Happy Coding!
I had this problem working with a FedEx shipment request. I perform the request with AJAX. The response includes tracking #, cost, as well as pdf string containing the shipping label.
Here's what I did:
Add a form:
<form id='getlabel' name='getlabel' action='getlabel.php' method='post' target='_blank'>
<input type='hidden' id='pdf' name='pdf'>
</form>
Use javascript to populate the hidden field's value with the pdf string and post the form.
Where getlabel.php:
<?
header('Content-Type: application/pdf');
header('Content-Length: '.strlen($_POST["pdf"]));
header('Content-Disposition: inline;');
header('Cache-Control: private, max-age=0, must-revalidate');
header('Pragma: public');
print $_POST["pdf"];
?>
//for pdf view
let pdfWindow = window.open("");
pdfWindow.document.write("<iframe width='100%' height='100%' src='data:application/pdf;base64," + data.data +"'></iframe>");
One suggestion is that use a pdf library like PDFJS.
Yo have to append, the following "data:application/pdf;base64" + your pdf String, and set the src of your element to that.
Try with this example:
var pdfsrc = "data:application/pdf;base64" + "67987yiujkhkyktgiyuyhjhgkhgyi...n"
<pdf-element id="pdfOpen" elevation="5" downloadable src="pdfsrc" ></pdf-element>
Hope it helps :)
Just encode your formatted PDF string in base 64. Then you should do:
$pdf = 'data:application/pdf;base64,'.$base64EncodedString;
return this to javascript and open in a new window:
window.open(return);
use function "printPreview(binaryPDFData)" to get print preview dialog of binary pdf data.
printPreview = (data, type = 'application/pdf') => {
let blob = null;
blob = this.b64toBlob(data, type);
const blobURL = URL.createObjectURL(blob);
const theWindow = window.open(blobURL);
const theDoc = theWindow.document;
const theScript = document.createElement('script');
function injectThis() {
window.print();
}
theScript.innerHTML = `window.onload = ${injectThis.toString()};`;
theDoc.body.appendChild(theScript);
};
b64toBlob = (content, contentType) => {
contentType = contentType || '';
const sliceSize = 512;
// method which converts base64 to binary
const byteCharacters = window.atob(content);
const byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
const slice = byteCharacters.slice(offset, offset + sliceSize);
const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
const blob = new Blob(byteArrays, {
type: contentType
}); // statement which creates the blob
return blob;
};
for the latest Chrome version, this works for me :
var win = window.open("", "Title", "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=200,top="+(screen.height-400)+",left="+(screen.width-840));
win.document.body.innerHTML = 'iframe width="100%" height="100%" src="data:application/pdf;base64,"+base64+"></iframe>';
Thanks