how to save file with name in a download function with javascript? - javascript

I have a function in my web app that allows me to download a present image. What I would also like it to do is give me the opportunity to save this file under the name upon download.
My function is this:
function saveFile(){
var dataURL = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
console.log(dataURL);
window.location.href = dataURL;
}
And how can I do to name this file?
Thank u all!

First create anchor tag and add href and download attribute to provide the uri and fileName respectively.
function saveFile(){
var dataURL = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
console.log(dataURL);
const anchorLink = document.createElement('a');
document.body.appendChild(anchorLink)
anchorLink.href = dataURL;
anchorLink.download = "file_name.png";
anchorLink.click();
document.body.removeChild(anchorLink)
}

Related

How to change file name when download it from server in AngularJS

I download a file using below code in AngularJS
$scope.download = function (row) {
var url = row.entity.downloadUrl;
window.open(url, "_blank");
};
The url is an image from file serve.How could I change/set the file name when I download it without using the name from file server.
I do not want to use any plugin,is that possible?
Create a a html attribute and use that to download your file.
var file_path = 'row.entity.downloadUrl';
var a = document.createElement('A');
a.href = file_path;
a.download = 'you new file name';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

Creating a file and triggering download in Javascript

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.

Javascript: unable to download the base64 decoded image

I want to download an image in JS which is base64 encoded. For this, I have first decoded the image and tried to download it. The file is downloading but the content in the downloaded files are nothing.
The encoded image is like:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
I used the following code to decode and download the image:
var imgdata = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
var imggetbase64decode = imgData.replace(/^data:image\/(png|jpg);base64,/, ""); // imgData is the encoded base64 string.
var data = imggetbase64decode, fileName = "my-download.png";
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
var json = data,
blob = new Blob([json], {type: "octet/stream"}),
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
I got the error during opening the downloaded file is:
Could not load image 'my-download.png'.
Here you can get what you are looking for
How to download a base64-encoded image?
if not please share some codepen link so i can help you out.

How to download a base64-encoded image?

I have a base64-encoded image from the server for which I want to force the download through JavaScript. Is is possible?
If you want to download it using JavaScript (without any back-end) use:
window.location.href = 'data:application/octet-stream;base64,' + img;
where img is your base64 encoded image.
If you want to allow the user to specify a file name, use the download attribute of the a tag:
<a download="FILENAME.EXT" href="data:image/png;base64,asdasd...">Download</a>
Notice: The download attribute is not supported by very old browsers
Simple way to do this with Javascript...
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
It is so simple just use function below:
// Parameters:
// contentType: The content type of your file.
// its like application/pdf or application/msword or image/jpeg or
// image/png and so on
// base64Data: Its your actual base64 data
// fileName: Its the file name of the file which will be downloaded.
function downloadBase64File(contentType, base64Data, fileName) {
const linkSource = `data:${contentType};base64,${base64Data}`;
const downloadLink = document.createElement("a");
downloadLink.href = linkSource;
downloadLink.download = fileName;
downloadLink.click();
}
I found this solution from the sourcecode of how Chrome takes full-page screenshots.
const base64string = "";
const pageImage = new Image();
pageImage.src = 'data:image/png;base64,' + base64string;
pageImage.onload = function() {
const canvas = document.createElement('canvas');
canvas.width = pageImage.naturalWidth;
canvas.height= pageImage.naturalHeight;
const ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false;
ctx.drawImage(pageImage, 0, 0);
console.log(canvas, pageImage)
saveScreenshot(canvas);
}
function saveScreenshot(canvas) {
let fileName = "image"
const link = document.createElement('a');
link.download = fileName + '.png';
console.log(canvas)
canvas.toBlob(function(blob) {
console.log(blob)
link.href = URL.createObjectURL(blob);
link.click();
});
};
I don't know whether am late to answer this, but I think the better solution could be this.
Create a file from the base64string
const convertBase64ToFile = (base64String, fileName) => {
let arr = base64String.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let uint8Array = new Uint8Array(n);
while (n--) {
uint8Array[n] = bstr.charCodeAt(n);
}
let file = new File([uint8Array], fileName, { type: mime });
return file;
}
Install File Saver from npm with
npm install file-saver
Import File Saver
const { saveAs } = require('file-saver');
/// OR
import { saveAs } from 'file-saver';
Using File Saver download the file
const downloadBase64Data = (base64String, fileName) => {
let file = convertBase64ToFile(base64String, fileName);
saveAs(file, fileName);
}
If this Answer has worked for you please upvote it and mark it as correct to help others easily find it
You can try this :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Download Text File DataURL Demo</title>
<style>
body{ font: menu; }
</style>
<script src='//js.zapjs.com/js/download.js'></script>
</head>
<body>
<h1>Download Text File DataURL Demo</h1>
<main></main>
<script>
download("data:application/octet-stream;base64,YOUR BASE64URL", "dlDataUrlText.jpeg", "application/octet-stream;base64");
</script>
</body>
</html>
download tag downloads the image using the script included.
For reference you can try this URL : http://danml.com/download.html
In my Angular App, I am getting the base 64 files from server.
In Html:-
<button type="button" (click)="downloadFile(fileName,base64data,fileType)"></button>
In Ts:-
downloadFile(fileName:string,data: any,fileFormat:string): void {
const linkSource = 'data:'+fileFormat+';base64'+data;
const downloadLink = document.createElement("a");
downloadLink.href = linkSource;
downloadLink.download = fileName;
downloadLink.click();
}
If you already have it in base64, add the image tag in front of the base64. attach it to the element
png64 = "data:image/" + png64;
$('#downloadPNG').attr('href', png64);
Add the file name that you want when downloading to the download tag.
<a download="chart.png" id="downloadPNG">Export img</a>
In my React App, I was getting the base 64 images from an API, I stored it in a global prop and downloaded it with the help of <a> tag.
<a href={`data:application/octet-stream;base64,${this.props.base64image}`} download={"imageName"}>Click to Download the image</a>
At first: This question is extremly browser dependent! I tried many, so I came up to answer this question that way:
You should put the base64-Data inside the src-Tag of an IMG-Element:
How to display Base64 images in HTML?
Then you can right click the Image and click "Save Image..." (or similar) in these browsers:
Chrome 79
Edge 44
Firefox 71
IE 11
Safari 13
Also on Android with Chrome and Firefox.
Biggest file working was 23 MB PNG-File in IE 11 and Safari 13. But Firefox and Chrome did also work for 86 MB JPEG.

How can I store the screenshot using html2canvas?

I am trying to save the screenshot of website using html2canvas 0.34.
But I don't know where the screenshot be saved, how to store the screenshot into my db, or open the the image with a new window.
My code is below:
<script type="text/javascript">
$('div').html2canvas({
onrendered: function( canvas ) {
var img = canvas.toDataURL();
window.open(img);
}
});
</script>
</head>
<body>
<h1>Testing</h1>
<div>
<img src='http://25.media.tumblr.com/tumblr_mcc5k9YRli1rt6zh0o1_500.jpg'>
</div>
</body></html>
I want to store the screenshot of the image into database or open in another windows.
Thank you very much.
The toDataURL function only returns the image data as a string, it is incapable of saving it (as JS don't have access to the file system)
In order to save it you ether have to let your browser load it as an image, or let a server side script handle it.
this should be useful to you
http://www.kevinsookocheff.com/2011/07/27/saving-canvas-data-to-an-image-file-with-javascript-and-php/
var data = canvas.toDataURL();
-----------------For Downloading Imgage in Chrome (just 4 testing)-------------------------
/* var save = document.createElement('a');
save.href = data;
save.target = '_blank';
save.download = 'fileName';
var event = document.createEvent('Event');
event.initEvent('click', true, true);
save.dispatchEvent(event);
(window.URL || window.webkitURL).revokeObjectURL(save.href);*/
//---------------------------------

Categories