We Keep Coding

Angular open a link always in a new tab Firefox

I have the following Angular code to download a PDF document. It works fine in other browsers but in Firefox when browser settings are set to "Open in Firefox" for PDF download then it doesn't open a new tab.
const blob = new Blob([data], { type: docType });
const blobDoc = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = blobDoc;
link.download = 'Filename.pdf';
link.click();
What I want is that in case of Firefox the link must always be open in a new tab. Even if when I set the target attribute, it doesn't open the new tab.
link.target = '_blank'
I tried the following and it works but then I do not get the file name.
const agent = window.navigator.userAgent.toLowerCase();
if (agent.indexOf('firefox') > -1) {
window.open(blobDoc, '_target');
} else {
// Normal download
}

Large file downloads don't work in Firefox browser

I have a Angular app where users can download some documents(.jpg, .mp4 and .pdf) that they uploaded. Basically the download of the file works in this way: A service is called which returns some information about the file as name, type, size and the content of it in base64.
This is the download method in Component when the user clicks on the download button:
downloadDocument(doc: Document) {
this._subDownDocument = this.service.getDocument(doc).subscribe((resp: Document) => {
var link = document.createElement("a");
link.download = resp.fileName;
link.target = "_blank";
// Construct the URI
link.href = resp.url;//Url is the content of the file in base64
document.body.appendChild(link);
link.click();
// Cleanup the DOM
document.body.removeChild(link);
});
}
It's working perfectly for files up to 12mb. But when files are bigger the download doesn't start, the service brings the file correctly but I don't know why the download doesn't start. No error is shown in the browser console.
This problem only happens with Firefox because in Google Chrome it works fine. Any idea on how can I solve this?

I solved this by installing FileSaver.js. It's used for large files purposes.
npm install file-saver --save
And changed my download method to:
downloadDocument(doc: Document) {
this._subDownDocument = this.service.getDocument(doc).subscribe((resp: Document) => {
//Url is the content of the file in base64
fileSaver.saveAs(this.b64toBlob(resp.url, resp.type), resp.fileName);
});
}
private b64toBlob(dataURI, type) {
var byteString = atob(dataURI.split(',')[1]);
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], { type: type });
}

Prevent OPEN file prompt in microsoft edge using angular js

I have a code in angular js which downloads an excel file on clicking a button. In chrome the file download starts automatically on clicking the button. But on Microsoft Edge clicking the button displays a prompt asking the user, whether they want to open or save file. Clicking on save button in prompt shows yet another prompt with 3 buttons OPEN, OPEN FOLDER and VIEW DOWNLOADS.
I know that edge provides settings options to disable the prompt on each download.
But is there any way on edge to start download but after downloading it does not show the second prompt asking what to do, using angular js or jquery?
The code for downloading file is as follows:
var fileName;
var a = document.createElement("a");
document.body.appendChild(a);
var type = headers('Content-Type');
var disposition = headers('Content-Disposition');
if (disposition) {
var match = disposition.match(/.*filename=\"?([^;\"]+)\"?.*/);
if (match[1])
fileName = match[1];
}
var blob = new Blob([data], {
type: type
}),
url = window.URL.createObjectURL(blob);
if (blob.size == 0) {
return;
}
a.href = url;
a.download = fileName;
var isIE = false || document.documentMode || /Edge/.test(navigator.userAgent); //if browser is IE and Edge
if (isIE) {
window.blur();
window.navigator.msSaveOrOpenBlob(blob, fileName);
} else {
a.style = "display: none";
a.click();
window.URL.revokeObjectURL(url);
}

Change downloaded file name

I have a function that uploads an image via a URL.
I want to change the name of the file, to download a file : 'image.jpg'.
Here's what I did:
public downloadImageJpeg(instanceUID: string, format: string): string {
var a = document.createElement("a");
a.download = 'image.jpg';
a.href = this.getRootUrl() + `/dicom/instances/${instanceUID}/wado/jpg`;
var e = document.createEvent("MouseEvents");
e.initMouseEvent("click", true, false, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
a.dispatchEvent(e);
}
My image is uploaded but its name does not change, it is 'jpg.jpg'. Do you know why it's not 'image.jpg' ??
//////////////EDIT//////////////:
However, I think my error comes from a.href. On some examples, I saw that he was given parameters.
I tried this:
a.href = "data:image/jpg;base64," + this.getRootUrl() + `/dicom/instances/${instanceUID}/wado/jpg`;
The file name changes well but the im not downloaded, this puts me 'network failure-error'

The following function works fine:
export function download(url: string, filename: string) {
var a = document.createElement('a');
if (a.click) {
// Use a.click() if available. Otherwise, Chrome might show
// "Unsafe JavaScript attempt to initiate a navigation change
// for frame with URL" and not open the PDF at all.
// Supported by (not mentioned = untested):
// - Firefox 6 - 19 (4- does not support a.click, 5 ignores a.click)
// - Chrome 19 - 26 (18- does not support a.click)
// - Opera 9 - 12.15
// - Internet Explorer 6 - 10
// - Safari 6 (5.1- does not support a.click)
a.href = url;
a.target = '_parent';
// Use a.download if available. This increases the likelihood that
// the file is downloaded instead of opened by another PDF plugin.
if ('download' in a) {
a.download = filename;
}
// <a> must be in the document for IE and recent Firefox versions.
// (otherwise .click() is ignored)
(document.body || document.documentElement).appendChild(a);
a.click();
a.parentNode!.removeChild(a);
} else {
if (window.top === window &&
url.split('#')[0] === window.location.href.split('#')[0]) {
// If _parent == self, then opening an identical URL with different
// location hash will only cause a navigation, not a download.
var padCharacter = url.indexOf('?') === -1 ? '?' : '&';
url = url.replace(/#|$/, padCharacter + '$&');
}
window.open(url, '_parent');
}
}
Source
From PDF viewer : https://github.com/mozilla/pdf.js/blob/94089960c04d7f59eb637d6dc63944115bbc539d/web/download_manager.js#L29-L63

Internet Explorer - The data area passed to a system call is too small - Downloading png with the uri

I am trying to download a png file using the uri (code below). It works in Chrome, Firefox and Safari - but not (of course) in Internet Explorer. I am on Windows 7, so I am using IE11 in Edge Document Mode. The error is "The data area passed to a system call is too small." I've read in this MDN post
IE9 and later, as well as Edge, supports data URIs in CSS and JS
files, but not in HTML files, with a max size of 4GB.
My URI is only 1410 bytes (using uri.length). Any ideas why I am getting the error with data of this size and how to fix it?
The download function:
function downloadURI(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = uri;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
delete link;
}
The uri format:
"data:image/png;base64,iVBORw0KGgo ETC..."

The solution is below. I can't seem to find the link to give credit, but this solved it. Instead of converting the canvas to a uri first, I pass the canvas and either convert to a uri and download using a link or (for IE) I convert to a blob and use canavas.msToBlob() and msSaveBlob()
function downloadURI(canvas, name) {
if (navigator.msSaveBlob) { // IE10+
var blob = canvas.msToBlob();
return navigator.msSaveBlob(blob, name);
} else {
var uri = canvas.toDataURL("image/png")
var link = document.createElement("a");
link.download = name;
link.href = uri;
document.body.appendChild(link);
if (link.click) {
link.click();
} else {
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, true, window);
link.dispatchEvent(event);
}
document.body.removeChild(link);
}
}