I Generate Photo on Website With JavaScript and use this code to download photo to my local computer but now I need to download it in file with link to use it.
const download = document.getElementById("download");
download.addEventListener("click", () => {
const canvas = document.getElementById("result");
const canvasContent = canvas.toDataURL();
const a = document.createElement("a");
document.body.appendChild(a);
a.href = canvasContent;
a.download = "photo.png";
a.click();
document.body.removeChild(a);
});
Related
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);
I have used the below code to download a csv file
let url = "https://test.com/test/auth/files/download/86ccc28c-383f-4c84-ac0d-61478da2f62c/e60f7709-288a-424c-bb13-9ff4bb60bec1?platform=HTMLCLIENT&source=855ca910c9d347b69403cf1791bab97c&linktoken=be50f537833bf693d9e0a3ecb8432159db966ee6"
window.open(url);
Above code is working in all browsers except safari browser.
I have done the below work around,
let a = document.createElement('a');
a.target = '_self';
a.href = url;
a.download = 'test.csv';
document.body.appendChild(a);
a.click();
which is opening a file in new tab instead of downloading in safari. could any one help with this problem?
Reference: https://bugs.webkit.org/show_bug.cgi?id=167341
https://github.com/dotnetCarpenter/FileReader_Chrome
fetches as blob and converts to a datauri. Not suitable for large files, as the entire base64 encoded file has to be stored in memory.
fetch(url, {
method: 'get',
})
.then(response => response.blob())
.then(blob => {
const fileName = 'filename.csv'
if (navigator.msSaveBlob) { // IE11 and Edge 17-
navigator.msSaveBlob(blob, fileName)
} else { // every other browser
const reader = new FileReader()
reader.onloadend = () => {
const a = document.createElement("a")
a.href = reader.result
a.style.display = 'none'
a.download = fileName
document.body.appendChild(a)
a.click()
a.parentNode.removeChild(a)
}
reader.readAsDataURL(blob)
}
})
Can you post any of your html? I've had success forcing downloads of files by using the download attribute within an anchor tag.
<a href="http://www.this.link.com/csv_1.csv" download...
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 am trying to download the file in angular js. For that, I have used the blob concept . File is getting download successfully but when I open that file it says File is corrupted.
var saveData = (function () {
var a = document.createElement("button");
document.body.appendChild(a);
a.style = "display: none";
return function (excelData, fileName) {
// var blob = b64toBlob(excelData, contentType);
blob = new Blob([excelData], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}),
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
};
}());
I'm using an HTML5 site to create a log per-say within a textarea element. I need to pull the data from that area with the click of a button, and download it to my computer via a .txt file. How would I go about doing this if it is possible??
HTML:
<input type="button" onclick="newBlob()" value="Clear and Export">
Javascript:
function newBlob() {
var blobData = document.getElementById("ticketlog").value;
var myBlob = new Blob(blobData, "plain/text");
blobURL = URL.createObjectURL(myBlob);
var href = document.createElement("a");
href.href = blobURL;
href.download = myBlob;
href.id = "download"
document.getElementById("download").click();
}
I figure if I make the Blob, create a URL for it, map the URL to an "a" element then auto-click it then it should work in theory. Obviously I'm missing something though. Any help would be fantastic. 1st question on this site btw:p
The simplest way I've come up with is as follows:
function download(text, filename){
var blob = new Blob([text], {type: "text/plain"});
var url = window.URL.createObjectURL(blob);
var a = document.createElement("a");
a.href = url;
a.download = filename;
a.click();
}
download("this is the file", "text.txt");
List of possible blob filestypes: http://www.freeformatter.com/mime-types-list.html
const downloadBlobAsFile = (function closure_shell() {
const a = document.createElement("a");
return function downloadBlobAsFile(blob, filename) {
const object_URL = URL.createObjectURL(blob);
a.href = object_URL;
a.download = filename;
a.click();
URL.revokeObjectURL(object_URL);
};
})();
document.getElementById("theButton").addEventListener("click", _ => {
downloadBlobAsFile(new Blob(
[document.getElementById("ticketlog").value],
{type: "text/plain"}
), "result.txt");
});
The value of a download property of an <a> element is the name of the file to download, and the constructor of Blob is Blob(array, options).
I used this approach that doesn't involve creating an element and revokes the textFile after the browser showed the text file
var text = 'hello blob';
var blob = new Blob([text], { type: 'text/plain' });
let textFile = window.URL.createObjectURL(blob);
let window2 = window.open(textFile, 'log.' + new Date() + '.txt');
window2.onload = e => window.URL.revokeObjectURL(textFile);