I wrote a JS code to download pdf and zip files into the browser. For pdf download everything works fine. But for zip download, it's not working for ISO(15.3.1) chrome and firefox. But this works fine for the safari browser. Before updating the version(15.1) it was working fine for all browsers. I also tried using https://github.com/eligrey/FileSaver.js but the same problem exists.
let req = new XMLHttpRequest();
req.open("POST", url);
req.responseType = "blob";
req.onreadystatechange = function () {
if (req.response != null && req.status === 200) {
let link = document.createElement('a');
link.href = URL.createObjectURL(req.response);
link.download = $currComponent.find(".downloadFileName").val() + "." + req.response.type.split("/")[1];
link.click();
link.remove();
}
};
req.send(JSON.stringify(data));
Here I added the code that I worked with.
Related
browser doesn't show progress bar when downloading a file
function getSound(sound) {
var req = new XMLHttpRequest();
req.open("GET", sound, true);
req.responseType = "blob";
req.onload = function (event) {
var blob = req.response;//if you have the fileName header available
var link=document.createElement('a');
link.href=window.URL.createObjectURL(blob);
link.download='sound.mp3';
link.click();
};
req.send();
}
I want show like this
The issue is that by the time you call 'click' the file is already downloaded. But you didn't need to download the file in advance:
function getSound(sound) {
const link=document.createElement('a');
link.href=sound;
link.download='sound.mp3';
link.click();
}
You have to add Content-Lenght header to let the web browser know the size of your file.
I'm trying to render a pdf inside an iframe. It is working fine on Mozilla (v54) and Chrome (v59) but nothing happens in IE(v11) when I click on the link which loads the PDF. After debugging several times I found that the URL in Chrome/Firefox is blob:http://localhost:37444/5a8e7fed-cd61-4c58-904c-fad2ae169718 and in IE(v11) it is blob:B7395CB5-169D-471F-BB8F-AA90EAFB6DDB. Why is URL.createObjectURL(blob) not appending the http request in IE(v11)
function (iframe, url, headers) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = handler;
xhr.responseType = "arraybuffer";
headers.forEach(function (header) {
xhr.setRequestHeader(header[0], header[1]);
});
xhr.send();
function handler() {
if (this.readyState === this.DONE) {
if (this.status === 200) {
var blob = new Blob([xhr.response], { type: "application/pdf" });
var objectUrl = URL.createObjectURL(blob);
iframe.src = objectUrl;
} else {
console.error('XHR failed', this);
}
}
}
IE does not create a url for these blob objects because of security reasons i think.So using var objectUrl = URL.createObjectURL(blob);will not give you the source url which you can use inside iframe or embed tag.
I faced the same issue and searched a lot about the fix.But could not get the answer.Instead i solved it as following.
you can use the following for IE
if (bowser.msie && window.navigator.msSaveOrOpenBlob) {
navigator.msSaveOrOpenBlob(file, fileName);
}else{
//do what you were doing for other than IE
}
the above IE code will prompt the user that whether he wants to save the file or directly open it.
User can click on button 'open' and then IE will show the PDF without downloading it in default reader.
code written in javascript to download the data in CSV. which is working fine in FF, Chrome browser. But in Safari showing Type Error
"TypeError: '[object BlobConstructor]' is not a constructor (evaluating 'new Blob([csv], { type: 'text/csv;charset=utf-8;' })')"
I tried in all forum to solve this issue. but nothing work out.
Code I followed :
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
if (navigator.msSaveBlob) { // IE 10+
navigator.msSaveBlob(blob, filename);
} else {
const link = document.createElement('a');
if (link.download !== undefined) { // feature detection
// Browsers that support HTML5 download attribute
const url = URL.createObjectURL(blob);
link.setAttribute('href', url);
link.setAttribute('download', filename);
link.style = 'visibility:hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
Suggestions and solutions welcome.
I can download a PDF using AngularJS in Chrome, but this doesn't appear to work in the latest FireFox, Internet Explorer 11 or Edge (assuming it doesn't work for IE10 either), and I know a shim is needed for IE9. Don't know if this the best shim for this if anyone has an opinion, but currently it doesn't seem to work. I tried it with a response type of blob and arraybuffer just in case that made a difference, and it doesn't.
All this counters what caniuse indicates about using the Blob URLs. Anyone have this working in IE9 and up, and the last couple versions of FF, and can point out what I'm doing wrong?
$http({
url: '/api/v1/download',
method: 'GET',
responseType: 'blob' // or 'arraybuffer'
}).then(function (response) {
// Use the Blob object to create an object URL to download the file
var url = URL.createObjectURL(response.data);
// var url = URL.createObjectURL(new Blob([response], {type: 'application/pdf'})); // arraybuffer version
// Create an anchor to perform download, but don't append to the DOM
anchor.href = downloadUrl;
anchor.download = filename;
anchor.target = '_blank';
anchor.click();
URL.revokeObjectURL(downloadUrl);
anchor = null;
}).catch(function (reason) {
console.log('FAIL', reason);
});
UPDATE
Currently the best (only) answer works for IE10, 11, Edge, FF, and continues to work with Chrome. IE9 won't work using this solution if anyone has another polyfill/shim/other/etc, and Safari doesn't support the download attribute so the solution in the chosen answer doesn't work in an SPA since it just redirects the current page so in both these cases I've just left TODO stubs.
This is an update to the posted answer with more information added in comments for anyone to use or hopefully add to so IE9 and Safari work as expected:
function performDownload(blob, filename) {
// IE9 has no API for handling downloads using Blob objects, and doesn't support the download attribute
if(isIE() == 9) {
// TODO: polyfill/shim/other... change response type to?
}
// Only works for IE10 and up, including Edge
else if (typeof window.navigator.msSaveBlob !== 'undefined') {
// Provides a prompt to save the file to a location of users choice
window.navigator.msSaveBlob(blob, filename);
}
// Browsers that adhere to current standards can implement downloads
// using the Blob object with the download anchor attribute
// ---
// NOTE: Edge 13+ is compliant with both these standards, but Edge 12
// does not support the download anchor attribute so all versions
// have been grouped to use the propriety `msSaveBlob` method
else {
// Use the Blob object to create an object URL to download the file
var URL = window.URL;
var downloadUrl = URL.createObjectURL(blob);
var anchor = document.createElement('a');
if(angular.isDefined(anchor.download)) {
anchor.href = downloadUrl;
anchor.download = filename;
anchor.target = '_blank';
document.body.appendChild(anchor); // Required by Firefox
anchor.click();
// Release the existing object URL, and the anchor
$timeout(function () {
URL.revokeObjectURL(downloadUrl);
document.body.removeChild(anchor);
anchor = null;
}, 100);
}
else {
// TODO: Safari does not support the download anchor attribute...
}
}
}
I've used this with success in both IE11 and Chrome:
function saveBlob(response, contentType, filename) {
let blob = new Blob([response.arrayBuffer()], { type: contentType });
if (typeof window.navigator.msSaveBlob !== 'undefined') {
// IE workaround
window.navigator.msSaveBlob(blob, filename);
} else {
let URL = window.URL;
let downloadUrl = URL.createObjectURL(blob);
if (filename) {
let a = document.createElement('a');
if (typeof a.download === 'undefined') {
window.location.href = downloadUrl;
} else {
a.href = downloadUrl;
a.download = filename;
document.body.appendChild(a);
a.click();
}
} else {
window.location.href = downloadUrl;
}
// cleanup
setTimeout(function () { URL.revokeObjectURL(downloadUrl); }, 100);
}
}
page works well until being saved to Home Screen. If started from Home Screen no audio appears. The error is "Value is not a type of AudioBuffer". I guess there are problems with loading of audio with XMLHttpRequest() here.
M4A file presents in cache.manifest, so should be cached normally.
could you please advice? Thanks
function beep(){
var sound = context.createBufferSource();
sound.buffer = soundBuffer; <<< here
sound.connect(context.destination);
sound.noteOn(0);
}
......
if('webkitAudioContext' in window) {
context = new webkitAudioContext();
function bufferSound(event) {
var request = event.target;
soundBuffer = context.createBuffer(request.response, false);
}
var request = new XMLHttpRequest();
request.open('GET', 'stoplight.m4a', true);
request.responseType = 'arraybuffer';
request.addEventListener('load', bufferSound, false);
request.send();
}
Update: solved with Base64 audio encoding. iOS doesn't cache audio files.