If I use some code like this, to start a Download with Javascript in my browser:
const link = document.createElement("a");
link.style.display = "none";
link.href = URL.createObjectURL(file);
link.download = file.name;
document.body.appendChild(link);
link.click();
Do I have any way to understand if the file has been renamed during download? I mean: if I download two times the file test.txt, the second one is renamed in something like test(1).txt.
Any chance to detect this change in the script?
Thanks!
No.
There is no API that would provide that information.
Renaming gets done by the browser automatically if there already is a file with the same name. Therefore no.
These no way to detect the filename change.
if u want avoid the duplicated download (file name duplicated) from the same page as alternative solution u can create on an array to store previous filename
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 have a publicly accessible url to a PDF in Google Cloud Storage. I want to be able to create a button/link in react which allows users to download this PDF to their own computer. I'm wondering what is the best approach to do this and which libraries would be of help? Is there any documentation on this? Thanks
In order to force download a file, you have a number of options. First, the easiest is using the download attribute of an anchor tag:
PDF
However, this is not supported on IE and a number of other browsers in their earlier versions. But the maximum impact of this is it will open in a new tab which in my opinion is graceful degradation. See the full list of supported versions.
If this is not enough, you have to make some changes server-side. You can configure a server in many ways, but as an example, a .htaccess file can have the following:
<Files *.pdf>
Header set Content-Disposition attachment
</Files>
You can dynamically generate a link or button. Snippet bellow:
var sampleBytes = new Int8Array(4096); // In your case it should be your file
var saveByteArray = (function () {
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
return function (data, name) {
var blob = new Blob(data, {type: "octet/stream"}), // or application/pdf
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = name;
a.click();
window.URL.revokeObjectURL(url);
};
}());
saveByteArray([sampleBytes], 'example.txt'); // You can define the filename
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.
I'm trying to dynamically generate an anchor for a given content (documents and/or images stored on Cloudinary.io, in this case), but the documents I'm storing have a hash value rather than a filename (i.e.: c9eed62bd1534c382a3b89241b24b1ddd17b3793 instead of sample.pdf).
Here's the function I'm using to generate the anchor:
function download(url, download) {
if (url) {
var a = document.createElement('a');
if (a) {
a.href = url;
a.download = download || '';
a.target = '_blank';
a.click();
}
}
}
The problem I have is, when I execute the function, the browser downloads the file for me, but with the name in the href attribute rather than the download attribute.
This is the event I use to fire the download:
$('.link').on('click', function (e) {
download($(this).data('url'), $(this).data('name'));
});
And this is a sample HTML element containing the data to trigger the event:
<span class="link" data-url="http://res.cloudinary.com/dxsky7h00/raw/upload/v1483364241/627ec3e4afa08749ac4aff8d2917a38f586a5790" data-name="fs545554545454.xls"><i class="icon-file-o"></i>fs545554545454</span>
Maybe I understood the download attribute for the <a> element in a wrong way, but I thought, when specified, it forces the browser to download the resource rather than trying to open it on one hand and, on the other hand, if download="something" is used, the resource will be downloaded with the name being 'something' rather than what's in the href attribute.
What am I missing for this sample function to work?
EDIT I'm currently testing this on Chrome 55.0.2883.87 (64-bit), but as this entry on caniuse.com states, it's compatible
#tsh asked the right question. The problem lies in the fact the href attribute references an external resource, hence we're dealing with a cross-origin reference and the browser won't let me download it with another name.
I tested it with a local file and it worked, so the problem lies within my implementation. Thanks to all anyway :)
First of all let me clarify that what I'm trying to do is for locally use only, users will have direct access to the html page.
What I'm trying to do is basically append and save text to an HTML file.
This is what I have.
HTML (index.html)
<div id="receiver"></div>
<button id="insertButton">Insert</button>
JS
$(document).ready( function() {
$('#insertButton').click(function(){
$('#receiver').append('<h1>Hi,</h1>','<p>How are you?</p>');
})
});
What I don't know is how to save the file (index.html) after the appending. Any idea how to do that? Is this even possible with Javascript or jQuery?
You could change your handler to do this:
$(document).ready( function() {
$('#insertButton').click(function(){
$('#receiver').append('<h1>Hi,</h1>','<p>How are you?</p>');
// Save the page's HTML to a file that is automatically downloaded.
// We make a Blob that contains the data to download.
var file = new window.Blob([document.documentElement.innerHTML], { type: "text/html" });
var URL = window.webkitURL || window.URL;
// This is the URL that will download the data.
var downloadUrl = URL.createObjectURL(file);
var a = document.createElement("a");
// This sets the file name.
a.download = "source.htm";
a.href = downloadUrl;
// Actually perform the download.
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
})
});
You should take a look at the compatibility matrix and documentation of URL over at MDN. Notably URL is not available for IE 9 or earlier. Same for Blob.
If I understand it correctly, you need it on local machine and for temporary usage then you can store it in cookies.
So whenever you load the page, check if cookie available, if yes then load data from cookies or load the fresh data.
You can use this data, unless and until cookies are not cleared.
Hope this helps...
Don't need any javascript. After the html is appended, just press Ctrl+S to save the file locally with modified html.