Saving canvas element - javascript

I found that I could download the contents of a <canvas> element to file, by using the following script:
var download = function(){
var link = document.createElement("a");
link.download = 'filename.png';
link.href = cvs2.toDataURL();
link.click();
}
When using this method on Chrome (android) however, it seems to have downloaded the file into a private chrome folder on my device. What I need is for the canvas contents to be downloaded as an image file into the normal download folder(ie /sdcard/Downloads).
How can I achieve this?

Consider using the toBlob() method on the canvas element to first acquire a file/blob of the canvas contents. Then, use the createObjectURL() and revokeObjectURL() methods of the URL API as shown, to get and assign the corresponding url to your temporary download link:
var download = function(filename, mimeType) {
/* Use toBlob to get a file from the canvas element */
canvas.toBlob(function(blob) {
/* Get url for this file blob */
var url = URL.createObjectURL(blob);
/* Create temporary link and start download */
var link = document.createElement("a");
link.download = filename;
link.href = url;
link.click();
/* Clean up */
URL.revokeObjectURL(url);
}, mimeType);
}
/* Usage example */
download('my-filename.png', 'image/png')
Hope this helps!

For chrome you can use donwloads.download()

Related

Download PDF from url react

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

How download base64 data as image?

I use vue-signature Library and I Don't know how to download base64 data generated as image,
Here is Link of library : https://www.npmjs.com/package/vue-signature
I've already read the documentation and see That "Save()" Methods Save image as PNG/JPG… but it give me base64 data,
thank you for your collaboration, I use vue js
This is not the most optimized solution, But it works.
var a = document.createElement("a"); //Create <a>
a.href = "data:image/png;base64," + ImageBase64; //Image Base64 Goes here
a.download = "Image.png"; //File name Here
a.click(); //Downloaded file
In your case you can try this
var canvas = document.querySelector("canvas");
var signaturePad = new SignaturePad(canvas);
// Returns signature image as data URL (see https://mdn.io/todataurl for the list of possible parameters)
signaturePad.toDataURL("image/jpeg"); // save image as JPEG
source : https://vuejsexamples.com/vue-signature-pad-component/

How can I download a pdf from a url using javascript?

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.

JavaScript changing default file name?

How would I go about changing the name of a clip that is going to be downloaded by the client on a website? Each video clip currently downloaded is a default name how do I go about customising it?
Yes, you can change file name as per your own logic. and will be download in client browser as per following logic :
var blob = b64toBlob(b64Data, contentType, false);
var blobUrl = URL.createObjectURL(blob);
var a = document.createElement("a");
document.body.appendChild(a);
a.style.display = 'none'
a.href = blobUrl;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(blobUrl);
FileName can be set as per your own logic and append file extension
b64Data = your file's binary data, contentType = content type of your file.
for example for image it will be "data:image/png;base64,"

Download file without extension with JavaScript

I wanna download some files through js.
The following code works fine when the file has an extension ie. http://example.com/img.jpg, but when it doesn't ie. http://example.com/img it just redirects me to a blank page with the file, as a normal link does.
function downloadURI(uri) {
var link = document.createElement('a');
link.href = uri;
link.click();
}
How do I get over this issue, and make the browser to download?
Simply tell your browser that it's a download:
function downloadURI(uri) {
var link = document.createElement('a');
link.href = uri;
link.download = 'download';
link.click();
}
downloadURI('test')

Categories

Resources