I'm downloading html file with the content of a div. It's working perfectly but only issue is that it's downloading file in downloads folder instead i want it to download in the folder where project exists.
Here is the code of download function:
function download(){
var a = document.body.appendChild(
document.createElement("a")
);
a.download = "design.html";
a.href = "data:text/html," + document.getElementById("editor").innerHTML;
a.click();
}
You cannot control where the user have to download the file to. It's user's choice.
Related
What is the best and fastest way to download a local file with javascript function:
I have a button once clicked should launch the download process, I am trying to use javacript to handle this but it is not working !!!!
here is the code: the function receives the file name as parameter and the path is static:
function downloadFile(filename) {
var filePath = "C:\\LangsDirectory\\Test\\" + filename;
var downloadLink = document.createElement("a");
downloadLink.href = uri;
downloadLink.download = filePath;
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}
The download attribute does not work on cross-origin URLs and all file: scheme URLs are considered cross-origin.
The only way I can see to do this would be to use a file <input> to have the user select the file, then read it with JavaScript, generate a Blob from it, and then set up a download for that.
I wouldn't bother. The file is already local. The user can move or copy it to wherever they like using their normal file manager.
I need to download pdf's from one of our online resources.There is no built in function to batch download.The only way to do it is to navigate to each pdf file, click to open, then click download.
There are several thousand files and this would take a very long time to do.
I got around this in the past using javascript. I gathered all the links to the pdfs, put them in a csv, and had the code loop through each link, download, and move onto the next link.
Unfortunately, I have lost that code and my efforts to recreate it have been unsuccessful.
I have tried everything in this article: How to download PDF automatically using js?
I have tried the code from this article (which I'm pretty sure is what I did before): https://www.convertplug.com/plus/docs/download-pdf-file-forcefully-instead-opening-browser-using-js/
This is what I think should work...per the second article I referenced above
function download_file(fileURL, fileName) {
var link = document.createElement('a');
link.href = fileURL;
link.download = 'file.pdf';
link.dispatchEvent(new MouseEvent('click'));
}
var fileURL = "link/to/pdf";
var fileName = "test.pdf";
download(fileURL,fileName);
The code above is just to test download one file from a hardcoded URL. If it worked as intended, when the page is loaded, it should download the pdf from the provided url. Instead, it doesn't do anything on load or refresh.
Any suggestions?
Please check
https://stackoverflow.com/a/18983688/6923146
click me
Another one
https://stackoverflow.com/a/45905238/6923146
function download(url, filename) {
fetch(url).then(function(t) {
return t.blob().then((b)=>{
var a = document.createElement("a");
a.href = URL.createObjectURL(b);
a.setAttribute("download", filename);
a.click();
}
);
});
}
download("https://get.geojs.io/v1/ip/geo.json","geoip.json")
download("data:text/html,Hello Developer!", "HelloDeveloper.txt");
I hope it helpfull
https://www.convertplug.com/plus/docs/download-pdf-file-forcefully-instead-opening-browser-using-js/
You must add link element to DOM
function download_file(fileURL, fileName) {
var link = document.createElement('a');
link.href = fileURL;
link.download = fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
var fileURL = "https://cdn.sstatic.net/clc/img/jobs/bg-remote-header-sm.png";
var fileName = "test.pdf";
download_file(fileURL, fileName); // fix function name
Link must be in same origin
The download attribute on anchor was ignored because its href URL has a different security origin.
When I download image versions of my canvas drawings I am unable to view or access them. My device keeps saying "doesn't support this file format" even though I have the image file labelled as "png" (lowercase too). The file downloads perfectly fine but that's about it. Any idea of what Im doing wrong?, below is the snippet of code. A link to my website too which is responsive [https://webdevcit.com/2018/Sem2/R00125891/Pages/structure/srctr1.html]
Any help would be very much appreciated
Download
function createDownload() {
const downloadURL = document.getElementById('c').toDataURL();
document.getElementById('downloadLink').href = downloadURL;
}
Open you downloaded file with a text editor and you will see it is a HTML Text file and not a PNG.
You are never calling the createDownload() function
Try this!!
let url = canvas.toDataURL();
let a = document.createElement("a");
a.href = url;
a.download = "image.png";
a.click();
I have Base64 files that I am trying to have the user download. I do not need these or want these to display in the browser. I need these to download. The data seems to be coming back fine, but only certain types of files are behaving.
I am grabbing down the data in an ajax call and then checking to see if there is any data.
$('button').on('click', function(){
...ajax call
if (data) {
var encode = 'data:image/' + data.dataTypeCode + ';base64,'
var image = encode+data.data;
window.open(image, '_blank');
}
})
This is only opening the word, excel, gif, mpg, tif and pdf files.
This is not opening the png, jpg, mp3 files which I find odd.
You cannot force a user to automatically download a file simply due to the file represented as a data URI or Blob URL being opened in a window. You can offer a file to be downloaded.
const a = document.createElement("a");
a.download = "fileName";
a.href = /* data URI, Blob URL*/;
document.body.appendChild(a);
a.click();
I'm working with an existing Electron project (convert web app to desktop app), which has a task that is to export content on screen to pdf/png/jpg.
Here is the situation:
The desktop app is purely client-side code, it doesn't connect to any API or server (just in case you suggest a solution using Nodejs server-side code)
I got the dataUrl from canvas object already (it's a base64 string of the file)
How can I save that dataUrl into a file (pdf/png/jpg)?
Here are some ways that I tried:
The good old window.location = dataUrl (nothing happens)
Create a form inside the div, action = dataUrl, then submit the form
Both ways are not working!
Thank you very much
For the download to occur the MIME type of the data URI needs to be changed to "application/octet-stream"
var dataURL = "data:text/plain,123";
var form = document.createElement("form");
form.action = dataURL.replace(/:[\w-/]+(?=,)/, ":application/octet-stream");
form.method = "GET";
document.body.appendChild(form);
form.submit();
Using <a> element with download attribute
var dataURL = "data:text/plain,123";
var a = document.createElement("a");
a.download = "file";
a.href = dataURL;
document.body.appendChild(a);
a.click();
See also How to download a file without using <a> element with download attribute or a server??