We Keep Coding

Force download with Js

I need to have a page that accesses two links, one in a window/tab that downloads a file and another one that after about 5 seconds or so accesses directly to this linl.
Currently I have the following code:
if ("URL1" !== '') {
const link = document.createElement('a')
link.href = "URL1"
link.target = "_blank"
link.download = "pdf"
link.click()
setTimeout(function() {window.location.href = "URL2"; }, 5000 );
} else {
window.location.href = "URL2" />"
}
I've tried to force the download in several ways with Javascript since the tool I work with doesn't allow PHP, but I can't get it to download correctly.

dynamically adding a button in html page with simple Javascript without any framework or library

hey there i'm making a simple webpage which requires to download an output image file at the last step..
but i don't know how can i add download button dynamically at correct time, because at starting of a page there is no need of download button..
so i have main.js file:
which looks something looks like this:
let img_code=document.getElementById('img_code');
let textbox=document.getElementById('textbox');
let gen_button_img=document.getElementById("img_button");
gen_button_qr.addEventListener("click",()=>
{
var trailer=textbox.value;
var url='www.example.com';
var result= url.concat(trailer);
if (navigator.onLine)
{
if(trailer.length<=1725 && trailer.length>0)
{
if((trailer !="0")&& (trailer.replace(/\s/g, '').length))
{
image_code.src=result;
alert("Image Generated successfully");
/**/
}
else
{
alert("You cannot create this file spaces only or only with single 0");
}
}
else
{
alert("Maximum charecter limit is exceeded!! ");
}
}
else
{
alert("No Internet Connection");
}
});
So, i have the question is there any way to dynamically add the button which takes file URL as input and download that file through web browser's downloader?
Note=>
I can easily save the result by right click on the picture and save image option; but i want to add an extra button to download the same file.

Most of the things explained in comments so read it first
// arrow function to create and append download button into any element
// it only takes url of file that will download.
const createBtn = (URL) => {
// create button element
const downloadBtn = document.createElement("button");
// you can set any name of id according to your choice
downloadBtn.setAttribute("id", "downloadBtn");
// create anchor element
const downloadLink = document.createElement("a");
// set any thing in inner text
downloadBtn.innerText = "Download Image";
// set download attribute to true
downloadLink.setAttribute("download", true);
// set url with URL
downloadLink.setAttribute("href", URL);
// append button element into anchor element
downloadLink.appendChild(downloadBtn);
// get that element in which download button will append
const container = document.getElementById("container");
// append download button into any element of your choice
container.appendChild(downloadLink);
};
// url of file
const URL = "https://images.pexels.com/photos/863963/pexels-photo-863963.jpeg?cs=srgb&dl=pexels-blaque-x-863963.jpg&fm=jpg"
// call createBtn function with URL
createBtn(URL);
<!-- The element in which download button will be appended -->
<div class="container" id="container"></div>
I am not 100% sure that this will work!
It also not work in stack snippet because iframe tag.
Try to use it locally.

download file with blob in angular

im new to angular and i have to add a button to an app so when i click, it should start downloading a file already recorded.
i have this code
var _RecordStopCallback = function(blob){
if (!blob && blob.length==0){
$scope.isRecorded = false;
return;
}
$scope.recordObj.recordedData = blob;
const url = URL.createObjectURL(blob);
var el = $("#downloads").html("");
var hf = $("<a></a>");
hf.attr({
src:url,
href:url,
download:$scope.recordFilename
}).html($scope.recordFilename);
hf.appendTo(el);
$scope.isStoping = false;
$scope.recordStatus = false;
$scope.isRecorded = true;
$scope.recordStatusText = "Start";
$scope.streamError = "";
_changeStatusText();
$scope.$apply();
$scope.saveProcess();
and in the HTML file this:
<div ng-show="isRecorded" class="color-info"> Recorded File : <span id='downloads'></span>
<button ng-click="{{recordFilename}}" class="btn-circle btn-circle-default">
<i class="zmdi zmdi-download"></i></button>
this line:
<span id='downloads'></span>
displays the recoded filename and makes it as a link so when you click on it you can directly donwload it, but i dont know how to make the button do the same thing?
any help would be appreciated!

You may register a callback for the button getting clicked and there you can create the same link you showed in your question, style it as hidden, insert it into the DOM and call .click() on it.
Inserting into DOM is required as some browsers will not start the download otherwise.

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);
}

.click() giving access denied in IE11

When trying to invoke a .click() of an anchor tag to auto click the url.
The code is working fine in all browsers except Internet Explorer v11.
Any help will be appreciated.
var strContent = "a,b,c\n1,2,3\n";
var HTML_APS = strContent;
var data = new Blob([HTML_APS]);
var temp_link = document.createElement('a');
temp_link.href = URL.createObjectURL(data);
temp_link.download = "report_html.htm";
temp_link.type = "text/html";
temp_link.style = "display:none";
document.body.appendChild(temp_link);
if (confirm("Press a button!") == true) {
temp_link.click();
temp_link.remove();
}
here is the fiddle.

For IE, you can use navigator.msSaveOrOpenBlob
so, cross browser, the code would be
var strContent = "a,b,c\n1,2,3\n";
var HTML_APS = strContent;
var data = new Blob([HTML_APS]);
if (confirm("Press a button!") == true) {
if (navigator.msSaveOrOpenBlob) {
navigator.msSaveOrOpenBlob(data, "report_html.htm");
} else {
var temp_link = document.createElement('a');
temp_link.href = URL.createObjectURL(data);
temp_link.download = "report_html.htm";
temp_link.type = "text/html";
document.body.appendChild(temp_link);
temp_link.click();
temp_link.remove();
}
}

When used download attribute an anchor, this signifies that the browser should download the resource the anchor points to rather than navigate to it. It doesn't support IE11.
For reference click here

Per this SO answer, the 'download' attribute has not been implemented in Internet Explorer.
The download attribute is not implemented in Internet Explorer.
http://caniuse.com/download
For Internet explorer you can use the "SaveAs" command.