Blank filename in HTML5 download Attribute - javascript

Here, I am trying to download CSV file but i am getting file without any file extension.
I am using http://jsfiddle.net/terryyounghk/KPEGU/ to export data in CSV format.
Even if you run above example it is downloading file which do not have any file extension.
Here I have listed my code.
var csvString = response;
var a = document.createElement('a');
a.href = 'data:attachment/csv;charset=utf-8,' + encodeURIComponent(csvString);
a.target = '_blank';
a.download = 'Report.csv';
document.body.appendChild(a);
a.click();

Related

Download pdf without opening in browser

I want to download pdf file directly without viewing, i have tries following things till now but nothing is helping.
1- window.open("https://s3-link1.pdf", 'Download');
2- <a href="https://s3-link1.pdf" download>Link</a>
Link - https://s3-link1.pdf
Assume my domain is https://www.somedomain.com
I somewhere read we can't download cross-origin files. content-disposition header is required to be passed from backend. I am puzzled here. Another csv file of cross-origin is being downloaded easily.
https://s3-link2.csv
I just need to download pdf file using javascript. Please guide me.
Try with fetch.
fetch("https://s3-link1.pdf", {
method: 'GET'
}).then(resp => resp.blob())
.then(blob => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = "name"; // the filename you want
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
})
Option 1:
with jQuery you can try this:
$.get("https://s3-link1.pdf", function (result)
{
var blob = new Blob([result]);
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = "myFileName.pdf";
link.click();
});
Option 2:
The download attribute works in all modern browsers, including MS Edge, but not Internet Explorer.
In the latest versions of Chrome, you cannot download cross-origin files (they have to be hosted on the same domain).
<a href="https://s3-link1.pdf" download>Download PDF</a>
Find more about it here on this blog: https://actualwizard.com/html-force-download-file

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,"

How to Set download Path in PHP

I'm downloading html file with the content of a div. It's working perfectly but only issue is that it's downloading file in downloads folder instead i want it to download in the folder where project exists.
Here is the code of download function:
function download(){
var a = document.body.appendChild(
document.createElement("a")
);
a.download = "design.html";
a.href = "data:text/html," + document.getElementById("editor").innerHTML;
a.click();
}
You cannot control where the user have to download the file to. It's user's choice.

Unable to export .csv file in IE browser

I'm trying to export my data as CSV file. I wrote below code, that is working fine in Firefox/Chrome but not in IE. I need to make work in IE8/9/10 versions. Thanks in advance.
JS code:
var CSVgen = function (CSV, ReportName) {
//Generate a file name if empty is replace by _.
var fileName = ReportName.replace(/ /g,"_");
//Initialize file format you want csv or xls
var uri = 'data:text/csv;Content-Type:application/octet-stream;Content-Disposition: attachment;charset=utf-8,' + escape(CSV);
//this trick will generate a temp <a /> tag
var link = document.createElement("a");
link.href = uri;
//set the visibility hidden so it will not effect on your web-layout
link.style = "visibility:hidden";
link.download = fileName + ".csv";
//this part will append the anchor tag and remove it after automatic click
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
And i tried below ways also:
var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);
and
var uri = 'Content-Type:application/octet-stream;Content-Disposition:
attachment;' + escape(CSV);
But no luck. I'm getting below error page in IE:
The webpage cannot be displayed
Most likely cause:
•Some content or files on this webpage require a program that you don't have installed.
What you can try:
Search online for a program you can use to view this web content.
Retype the address.
Go back to the previous page.

How to set delimiter while exporting html table to xls file, so that it won't ask for delimiter separately when opening file with openOffice calc?

Javascript code to generate xls file
// string to be obtained in xls file in different columns
var exportString = 'Source1; 240; A/V Signal drop out; 15';
// creating anchor tag
var a = document.createElement('a');
a.href = 'data:attachment/xls,' + exportString;
a.target = '_blank';
a.download = 'filename.xls';
document.body.appendChild(a);
a.click();
You may have different delimiters so you are probably not doing anything wrong open office just needs to know what should be used as delimiter.

Categories

Resources