I have created a function to download the file, but the issue is it opens the file on the same tab, I a trying to force download this file in the system.
I read other threads but didn't get the answer as I was expected and helpful.
Please help me create this function that downloads the file.
I have tried this code as below
function downloadURI(uri, name) {
var link = document.createElement("a");
link.download = 'name';
link.href = uri;
link.click();
link.remove();
}
downloadURI('https://example.com/myfile.pdf', 'customefilename.pdf');
Seems like - as with normal links - you need to set the target attribute.
Note: snippet won't work here because popups are blocked. This means that it does work.
function downloadURI(uri, name) {
var link = document.createElement("a");
link.download = 'name';
link.href = uri;
link.setAttribute("target", "_blank");
link.click();
link.remove();
}
downloadURI('https://example.com/myfile.pdf', 'customefilename.pdf');
here is a typical js download function sample. In your code, firstly you should replace 'name' with name, using the variable given.
function loadPdfFile(uri, pFileName) {
var downloadLink = document.createElement("a");
downloadLink.href = uri;
downloadLink.download = pFileName;
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}
The reason why it only opens the PDF might be you are running your code locally, you could try to put it to your server and test.
If you want to open the file in a new tab, you can simply add a target="_blank" attribute (link.setAttribute("target", "_blank");).
If you want to forcefully download the file instead of opening/previewing it in the browser, you can convert the file URI to a blob. For example:
async function downloadURI(uri, name) {
const link = document.createElement("a");
link.download = name;
const data = await fetch(uri).then((res) => res.blob())
link.href = window.URL.createObjectURL(
new Blob([data], { type: 'application/pdf' })
);
link.click();
link.remove();
window.URL.revokeObjectURL(link.href);
}
JS Fiddle: https://jsfiddle.net/sh4dfm6a/
if you need to open it in new tab just add target attribute like below EX
function downloadURI(uri, name) {
var link = document.createElement("a");
link.download = 'name';
link.href = uri;
link.target = "_blank";
link.click();
link.remove();}
downloadURI('https://example.com/myfile.pdf', 'customefilename.pdf');
Related
I am working in Alfresco and trying to download the file content as CSV file.
The download works, but only problem is that when I download a content that has dash or em dash inside, when I open that CSV file I see %u2013 and %u2014 instead.
This is my code for that part, I use JavaScript, but I do know how to solve this issue:
var blob = new Blob([CSV], {type: "text/csv;charset=utf-8;"});
if (window.navigator.msSaveOrOpenBlob && window.Blob) {
navigator.msSaveOrOpenBlob(blob, fileName + ".csv");
} else {
var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);
var link = document.createElement("a");
link.href = uri;
link.style = "visibility:hidden";
link.download = fileName + ".csv";
document.body.appendChild(link);
if (navigator.userAgent.search("Chrome") > 0) {
setTimeout(function () {
link.click();
}, 2000);
} else {
link.click();
}
}
document.body.removeChild(link);
For example, value named abolix-fix after the download inside CSV file it is like this abolix%u2013fix.
Thanks in advance!
What I actually want is to make something like Mega web, where when you download a file, first it downloads it inside your browser, then your browser prompts to actually download the file and the file will be downloaded instantly.
So far this is what I've found as a solution:
fetch(url).then(response => response.text())
.then(uri => {
var link = document.createElement("a");
link.download = name;
link.href = uri;
link.click();
})
while it works for small pictures, I've tried this approach on a 80mb file, and the tab crashed.
I haven't tested this yet but apparently this is working:
fetch(url)
.then((response) => response.blob())
.then((blob) => {
var URL = window.URL || window.webkitURL;
var fileURL = URL.createObjectURL(blob);
var link = document.createElement("a");
link.download = name;
link.href = fileURL;
link.click();
URL.revokeObjectURL(fileURL);
});
http://Company site/download_file?file_name=28528082-002-SH01.TIF&file_handle_name=MTIObjectHandle-0002-1~R~DghrOwfkoktsvsuGKP1--Pg7~p4Tiff~DELPHIDB~~
And the form selecting inspect element
28528082-002-SH01.TIF
I am not a Java programmer and I'm trying some of the codes from the internet but none of them work as I needed.
<button id="download" onclick="downloadFile()">download file</button>
<script>
document.getElementById('download').onclick = async function downloadFile(){
let s = await fetch(URL_OF_THE_FILE);
let link = document.createElement('a');
const blob = new Blob([await s.arrayBuffer()], { type: s.type });
link.href = window.URL.createObjectURL(blob);
link.download = NAME_OF_THE_FILE;
link.click();
}
</script>
I've got a really simple line in my code that should trigger the download of a file created on the go.
window.open(window.URL.createObjectURL(new Blob(["Example of something being written into a file then downloaded"], {type: "text/plain"})));
But for some reason, this does not work. A new window starts appearing, and then suddenly disappears.
Any clue why this doesn't work?
EDIT: If I call
`window.location = window.URL.createObjectURL(new Blob(["Example of something being written into a file then downloaded"], {type: "text/plain"}));`
It opens the file. But nothing was downloaded.
Try this solution
var saveData = (function () {
var a = document.createElement("a");
document.body.appendChild(a);
return function () {
var data = "Your data...........",
fileName = "filename";
blob = new Blob(data, {type: "text/plain"}),
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.text = "download file";
window.URL.revokeObjectURL(url);
};
}());
this will create new <a> element. You can download the file by clicking it.
This needs HTML 5 support and for more options, check answers for this question.
I'm trying to create and download a file on client side with the following code:
function downloadFile(filename, text) {
var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.click();
}
Although this only works on chrome. Nothing happens on safari and IE. How can I make it work?
Not sure if youve figured this out or not but for this to work in safari you need to create an event and dispatch on the created element like this:
var downloadLink = document.createElement('a');
downloadLink.setAttribute('href', 'data:application/octet;charset=utf-8,' + encodeURIComponent(data));
downloadLink.setAttribute('download', fileName);
downloadLink.style.display = "none";
downloadLink.onclick = function (event) {
document.body.removeChild(event.target);
};
var clk = document.createEvent("MouseEvent");
clk.initEvent("click", true, true);
downloadLink.dispatchEvent(clk);
document.body.appendChild(downloadLink);
downloadLink.dispatchEvent(clk);`
I used this to save my file in CSV/excel format and works in chrome/IE/Safari
refer and make changes needed
var fileName = name + "["+ name1 +"]";
var uri = 'data:text/csv;charset=utf-8,' + escape(finalResult);
var link = document.createElement("a");
link.href = uri;
link.style = "visibility:hidden";
link.download = fileName + ".csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
location.reload();