I have the following function to save a file to the browser using blob...
var saveData = (function () {
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
return function (data, fileName) {
var json = JSON.stringify(data),
blob = new Blob([json], {type: "octet/stream"}),
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
};
}());
I am passing the following data to it...
var filename = "style.css";
var data = CSSFile //CSS string
saveData(data, filename)
My data is a string of CSS attributes that I want to save as a CSS file. The problem is, when I open the downloaded CSS file, it look like...
"html, body {....} ... "
Notice it is surrounded by double quotes. I need these removed. I tried the following...
CSSFile = CSSFile.substring(0, CSSFile.length - 1);
saveData(data, filename)
But all that did was remove the first character inside the double quotes...
"tml,body{...}..."
How can I save the string without the double quotes?
You are getting quotes in your string because you are running it through JSON.stringify when it is already a string.
Try this instead.
var saveData = (function () {
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
return function (data, fileName) {
var blob = new Blob([data], {type: "octet/stream"}),
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
};
}());
Related
I am trying to downloading a string data as file such as text, and json files based on the fileType we are passing as parameter. I have tried below code.
function downloadString(text, fileType, fileName) {
var blob = new Blob([text], { type: fileType });
var a = document.createElement('a');
a.download = fileName;
a.href = URL.createObjectURL(blob);
a.dataset.downloadurl = [fileType, a.download, a.href].join(':');
a.style.display = "none";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
setTimeout(function() { URL.revokeObjectURL(a.href); }, 1500);
}
Downloading is working. But it always download txt file even if we pass json filetype.
Can anyone help this?
I have an array of urls. I download them with fetch and then get blob from each response with await res.blob(). I need to concat all these blobs together to make a full video out of it, I tried to push each blob into an array and make a file new File(blobArray, "test") but the result has a gap between each blob.
I've tried to save each blob as a separate file and concat them with ffmpeg -f concat -safe 0 -i text -c copy out3.mp4 and the result was perfect. So I know that my blobs are correct and the problem is how I am combining them together.
This is my full code:
(async function() {
var urlString = `
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e18160.ts?Expires=1630841672&Signature=C-DrIcvmIGkm0s42EQRPWh6Y-aEWvnl2xu1LOIWyzgQqOe-~6E9rLtpR5Kdfz8lNdNXVFz2XyrsgSX1Dn8AUbxUM6umqxALPn57sdSUoVf5-JQce472EHX-roQTsy3SAM~IIXH3B6FHcpdce~1vdqTze~nQY2F3wbzCPyspJSEPU74~-TySj8PhHrFtYNFIsFVr4R-Pc4FF-EWy2zXzo0Av59-4VlOXqFYhmQwcm~kimWNXJpOYhghv6pVbFYzyp7x9tYLiX1~9hbTG3otmoBAJGRt7EUlZiBZhprAgMzhrPS2TezenBKXNf0qJEp-fnC5so0OykRt-TGhyRapbJoA__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e18161.ts?Expires=1630841672&Signature=bBVrS4brV209hRADZgPnYQICBcXWe6Ed6zwBOFdozjIR1tiuahx3YmPhM8uaxLNRqowALgylen1wQBmdK5bGm~73DQUcUUfGXQU8kIv45CW1DyHDzX-ECR3MDpzSzIYDI8ELbFXK8gmT7ELgtmdkSrL0XO0FXCVAzLrzSw6-0XAZgzBY7tZUncRum5Wb7EhYQgluO2uCquz6HZqaVA9IYoCeFWKFXvU3xE-RBqHXksWkZO01o3UNEEgnzYrRepurcdYY029~6MsHEyj5304pDlefXKrEj8mbZidvhaUKkiIjcoG15jznWPvN3WAewK3zXpLlCYhBMuDL0kOVIq5zjA__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e18162.ts?Expires=1630841672&Signature=a3lUizMPzmtntrapM9qLk0f~GrfnQAFNlEJEzrvFowGMZVMukqPVfloM7Z9J33ZThK7mKfRy7tiYH1KDzCT5hpRl0X-pcCvcmAmy4u8h1upKO0RJmaP1v7PVzqACPTyvDHNDy3Fh-pxhpO1ubKR2SR7gq1n1K6tX8sbogNHmo0jPnERRxtLKF618nAuGBPQVYofkNG0zvcomGRX7iN95ovn8Ql9IxmqsGLGI2HzlJq3v8L4iS6UYUpV4yhAtZxmbERACq82JcwdiMMlLlnn~SoenYttzDrTdSh-u321KqjAoD6lij6l~j-dReVWY4HTDlsCnGaw9w-eOIuEywi8DpA__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e18163.ts?Expires=1630841672&Signature=Q6eYIsoPFVKYjY0vVDcnMKKI3oV14xnfDLpvJdH7Z9GoNqojPRXOyITTmd6Ed1JCxmF9oAkfvdghH0Ks1-fSYL3tvu5kMuJe2sWbeKCimqHQ89JvhJ3hOfVvUBIv-QVdbGYXD9FOr8T5s~HYC5KkDrFqRorDidH04y67P175sBXMtYIwt04KzG7m17X8kbJkjsjuVhD0sZ0ewACz1OBPnxO9qLdvGsRqVtW1FmuKSnDULieqdsQGfuH1YkkVCr7H4t0B5SF77vvxYkvcr4uGRjKMPVdggg3BYQKCWHn~pEEP2~P6oJZdfwbu9wnKJnIvimXVleHYW-hPk0OWBD5JAg__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e18164.ts?Expires=1630841672&Signature=HItA9pW3RiIhf9pFFGm4Y8FmikCPXBfh8gxJVNSLsJ9cuDONLX3n26ZjYO2NaROwsID9YjxwlDuS9jqqe62A7vLPsAjVmL6WvCZ8a22tAihPBPM-qOSWoHS7E~3bSurc9CzkQwlOBvg01~Mjl-E2kvP-hn0FxhTPk1FAE8BrL6DIeGKsBqIdvVgHsJyTi9osDNPG~OtKRKRskAK37QcXidkiLjFMcbX6uqwmcVHEpP30fDj13wBMwx2suuJ27~ICmSH44CHCuRcKujISKbrVjbnsUw4ivA7a72hyybSTDhwZBzjj753FFy0LqSVWVFOJJY1HXEnZ4mpvax9N1lth2Q__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e18165.ts?Expires=1630841672&Signature=L4T1BtTtHVM7p2JqvXEXLcJDUNdm8IZ8LU-oPkKxYBwuZHXEdxOLTTrFSX-3N39c7JMWDljWNi2bLrjbjK2xa1yMB5eTjvZTjusJDPk91RW0cMB4qsTpuXR1ui~ybPe5ABoV6N4cUXj~bUQFfUURo66kH5UdC~SIKMzQx59mnATvKZfZwOizm2kEuc8qaXPi9yJmYdPGhr6qSN1~kl0NEWciOU3o-etMtFc29yrlGl~Fgj0bvCyAwLwtR4yQwKFHCJWZPiMfJky9GJB4LKcyKBFu7bkDjk2BzOveJklvIPF~tZKkd3ki~I5kfYhTL-~hEDT4i9hIfHJEF1JF1rf~bw__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e18166.ts?Expires=1630841672&Signature=Kzf38iYJwebZG2nzkrPSVEvqWxSc959XcvUqiMhZC1lFwZefNTMw1a5EHcUfObujy~3XQ3Yxm-Ls8CziLLvO3Vi8wEg05GB1COnFT1hxasQHID1tmMaXrKrRBZp2XZApehhOpSroJdx46Zb8qlM4JMu3lf30eBIHsbPOIsdmW1o2E9USZUMUKiG-T3feO1kjT3scDsoKcaX2cQrqE8c1oAuEy57eASgFKQcy0OGtrxDujPHLNWYmRv~CFZxHf8LCuMKBrL9OtXE7py0g9x4d4BvwzQ5XOoQ5d5JsfnT8EeH5Lqbh8crtauJb5BrUk6j9uV1MWviZi7WQzGcds6eItg__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e18167.ts?Expires=1630841672&Signature=Vc5mVh~J-WEG2eHhiXnsNFBI~kpCtTnwwgiihaP6Fvm1IeA7eJ0QzA5g2Tq1VADLI-B2Bl1Ss~CmSyyXQEiM~IxRVjiNs1~PpnIKm0gFD0iBgIZOS3GoS6bx4bkRiy1tEMn98~~1VGqZ4FxJxc59QOdjmwvAvUvGN01zojOHt0i61XDqjeLz~wFUR9MVh~QYskV4w5sR~THYpKqiMej6JAIVz3avhadVlE1p0P9Gel7LLo59WjFx3Da1huQzBNQ2B8l3-pQpepwbiI0vsrN09aZHLnVtu1NPeEbpG5lZMIhYLay5qQTg1d87ouDoZ8zWYl0buPu5ZL06DiBFIDDhrA__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e18168.ts?Expires=1630841672&Signature=QsdnxTFnRVml4yq~cbIMRDdESRoX6KH2AkCCm5J-MqW3QEr9RQU5Y7v41nKxIo~IgwI9FMoTRSk61whNyrLePlw2GXq38iK6UhlmpMkJYF3Tvj84GDckbpdqrIQLlZRJPngjx9n2eE3R8Sb7igXwIrr5dymYjEh2Hb0jkYs0~9Zfzr-pJAGoEdUr36hkGP2UXP4n~atb1cDW1hDbd8YJeUNYfKfTSPwq5~E9Te9P674pL2D~WutSM-Gk9xXMhVX7Z0VJWKQh5JWzSkrzDTc9rjTnotWJ7~kU1HqapqD2eVr3DOwI2b19Yv7FGWD3wrxtLA9A8AhkEbpaHLcuYyIS9w__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e18169.ts?Expires=1630841672&Signature=e-uHBmY7DMqAkrpRbtfyiRlglUU9wwLY5d2Oar44~xgQerrV~5dAa7q~Nf3V2WNyi22Bg88f4bvjYMIPMjghT4aZol7JXv1Q7VH~1xjydJfaIEXunOZzqswi4PbljlXui7W0c2c59hj~6c96bc6Iyr79x3bvylA1nnxJo2Y6a1Zus0irS7u-45BjXym27NtXrhOwpcVc2GNXhI74yqjXA-vFr1XVuHBHMQVMLTryYlStwoAUXnn7K~U88skq0ursQqpDFCmlDkgoXED~rdm7THJht9wOhkFbf2T79xsENBhPoiS56DLT7qIemBFGDUxHVeoTgZdMLXE2SVsgp-LBmQ__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e181610.ts?Expires=1630841672&Signature=KFxUkMZhteXsl3mSobA5Xg5~PQIztGtmgd~E1g2peja~oHMPNUWE6ihhcOEkO1M6CKXDycegq9~8xv6GqWSrRz5xntTYXNWyRT2-C0W2E79E0Fd1QLndb1~UP1uq~6z-8FbxXLIhHgCzSgaVtPxt8vFqQ1TI-Zd0j0ramKvfWu4iZiZTxEWn5d5Iaaf-LqTdgXWUKqWsr6F0czH7FZh6sI4NVmUAOOD1-sez5ALVr8GBruihB23W5E2yOWtk31KTC-M7TVf1AjwQTJurm~rWka4~~c2lCJ~~o-n~N5p38KdaReZWk2yCqHRYt7pdwpyqIAhosvsVs8Kf5AT2mQV-tQ__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e181611.ts?Expires=1630841672&Signature=AZuneobcwantsOflRrRO4DJzmW0JzqOcDDrB8YKIh~YbL5AuhlZV2OyN6fgUJ0~EVAqRk4h2RpUmZiD4ov8muNu3U-SHp1ksHia3d8cct7Ns485ta87Lb6GqX9yvF3qTNCTT3f5FSQeoKPmGXWPpbzUsdC7TGxNVy8M5IcdqHeoJDrOUeYOqnyQtNDrhWzFsp14YL4RqWBoiz0llpN6w-8QfaeWzCYkT~KxM0UKlPFDzeijXcNJS-tjCxUrT9CnYZ3IfMDvufDCfztd20x37rK1xSln~fuF4PLsMdrfpayY1lSPMgmLP9-~k7SiYth4qSU4CsdgY~1HTZJpUHg2AXQ__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e181612.ts?Expires=1630841672&Signature=Dcl1pJwVlfyN-Lqlq8RruR4t4c3l6Y~hSXPdZyLcspdg16gH-Jk78buQCD2LEniYF6xgXRVRgdLQj26lxiHJi2LiHXHV8~jKQVVrU2lnga9p48M35KdJZheJ~N6f91hsTpHEhYBBSR0TYhRcTMrh1WXstOMW5kHA01nVzq3mOpnHlDFpcHNuTslTAAouqeMXsdY6H4ta15puQcVnvqchOr-7c5dU4ZG14FtHF2WvjnMEWARWDvivOvoqQAqwPQgHm5SxJFw~qyZmIeRUG-TT9i-RXIAzSivg6vKiP2A-AomTOwGW3oFRXKLdMXSMlcd6lmQ7~b7jTi7uNX4Bhup-jQ__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
`
const urlArr = urlString.split(",")
let blobArr = [];
for(let url of urlArr) {
if(url) {
try{
const res = await fetch(url);
const blob = await res.blob();
blobArr.push(blob)
} catch (err) {
console.log(err)
}
}
}
const newBlob = new Blob(blobArr)
const finalFile = new File([newBlob], "test-udemy");
const a = document.createElement("a")
const url = URL.createObjectURL(finalFile);
a.href = url;
a.download = "test-udemy";
document.body.appendChild(a);
a.click();
setTimeout(function() {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 0);
})()
Unfortunately links will expire soon but I think it is obvious what I am trying to do.
So Is there any way to cancat blobs in JS and create the entire video smoothly like the ffmpeg does?
Thanks in advance.
try to create and download the blob like this, you can safely omit the file creation:
let blob = new Blob( blobArr, {
type: "video/mp4",//your own type here
});
let url = URL.createObjectURL(blob);
let a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = url;
a.download = "PRUEBA.webm";//your own name here
a.click();
window.URL.revokeObjectURL(url);
I set both content_type and to_csv encoding as utf_8_sig
response = HttpResponse(content_type='text/csv;charset=utf_8_sig')
response['Content-Disposition'] = 'attachment; filename=somefilename.csv'
df.to_csv(path_or_buf=response,sep=',',float_format='%.2f',index=False,decimal=",",encoding='utf_8_sig')
and then ,
send csv to user in javascript
//ajax response
DownlodCsv(response);
const DownloadCsv = (function() {
const a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
return function(data, fileName) {
const blob = new Blob([data], {type: "octet/stream"}),
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
};
}());
However it still utf-8 not utf-8-sig
(because I can't open this by excel)
Is there any place I should to check?????
I solved like this below.
Just adding the bom in Javascript.
return function(data, fileName) {
let bom = new Uint8Array([0xEF, 0xBB, 0xBF]); // add here
const blob = new Blob([bom,data], {type: "octet/stream"}), // add bom
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
};
I need to get correct binary string (for further operations) from file input. I'm obtaining code via FileReader, but code is wrong. In the next code I'm getting binary string and trying to build blob from it:
function sendBlobToBrowser( blob )
{
var url = window.URL.createObjectURL(blob);
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = url;
a.download = 'audio.ogg';
a.click();
setTimeout(function() {
window.URL.revokeObjectURL(url);
}, 100)
}
function buildBlobFromString( binaryString )
{
return new Blob( [ binaryString ], { type : 'audio/ogg' } );
}
$( '#fileInput' ).change( function()
{
var file = this.files[ 0 ]
var reader = new window.FileReader();
reader.onloadend = function() {
var binary = this.result;
console.log( 'Converted string src: ' + binary )
// trying to build blob
var builtBlob = buildBlobFromString( binary );
sendBlobToBrowser( builtBlob )
}
reader.readAsBinaryString( file );
})
Here is the example.
For tests I'm using this ogg file, but it's not about audio web api, it's just some example-file.
I have tired to fight with it :( Really thx.
readAsBinaryString is deprecated don't use it
The string you get from readAsBinaryString is not "binary" its just text the binary part is in how the string is created(each byte is read into a character). Use readAsArrrayBuffer if you want the result to be binary.
You can use a File to create an Object Url (file instanceof blob === true)
function sendBlobToBrowser( blob )
{
var url = window.URL.createObjectURL(blob);
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = url;
a.download = 'audio.ogg';
a.click();
setTimeout(function() {
window.URL.revokeObjectURL(url);
}, 100);
}
$( '#fileInput' ).change( function()
{
var file = this.files[ 0 ];
sendBlobToBrowser( file );
});
In my Ext Js solution I am calling a service which is returning this JSON format
{"success":true,"filename":"spreadsheet.xlsx","file":[80,75,3,4,20,0,...(many more)]}
How can I make a file download dialog with the filename and the content of the byte array (file) ?
UPDATE
So I found this bit to start the downlaod
var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob(data.file, { type: 'application/octet-stream' }));
a.download = data.filename;
// Append anchor to body.
document.body.appendChild(a)
a.click();
// Remove anchor from body
document.body.removeChild(a)
So far good
But the file I get is corrupted so I suspect I need to Encode/Decode the file variable?
I had to convert the file into a Uint8Array before passing it to the Blob
var arr = data.file;
var byteArray = new Uint8Array(arr);
var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob([byteArray], { type: 'application/octet-stream' }));
a.download = data.filename;
// Append anchor to body.
document.body.appendChild(a)
a.click();
// Remove anchor from body
document.body.removeChild(a)
Reading this answer helped a lot https://stackoverflow.com/a/16245768/1016439
Building on Jepzen's response, I was able to use this technique to download a document from AWS S3 from within the browser. +1 Jepzen
s3.getObject(params, function(err, data) {
if (err === null) {
var arr = data.Body;
var byteArray = new Uint8Array(arr);
var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob([byteArray], { type: 'application/octet-stream' }));
a.download = fName; //fName was the file name portion of the key what was passed in as part of the key value within params.
// Append anchor to body.
document.body.appendChild(a)
a.click();
// Remove anchor from body
document.body.removeChild(a)
} else {
result = 'failure'
console.log("Failed to retrieve an object: " + err);
}
});