Develop Reference

How to rename downloaded files from window.open() in javascript?

I recently stumbled upon this JSFiddle about how to convert a table to Excel file directly without any fancy plugins. It really suits my need, but it has a flaw, I can't rename its file. Chrome renames the file to download and Firefox gives a random name to it.
$("#btnExport").click(function (e) {
window.title = "filename.xls"; // this part doesn't work
window.open('data:application/vnd.ms-excel,' +
$('#dvData').html());
e.preventDefault();
});
How can I rename the downloaded file ?

Use <a> element with download attribute
let file = new Blob([$('#dvData').html()], {type:"application/vnd.ms-excel"});
let url = URL.createObjectURL(file);
let a = $("<a />", {
href: url,
download: "filename.xlsx"
})
.appendTo("body")
.get(0)
.click();
jsfiddle https://jsfiddle.net/jWAJ7/4549/

Troubles downloading a pdf from PHP and getting it with AngularJS

I hope you're good!
I have an REST-API with PHP (Flight-PHP as framework) running in one server and I want to download a PDF saved in the server. But I'm having troubles with that.
The API resource that needs to be called to download the PDF is like:
GET /sales/:id/download
If I run the resource mentioned above in a browser, it will download a PDF file and it will display the PDF downloaded without troubles.
Now, in the frontend (a.k.a. a web application running in my browser) I have the following code:
$scope.download = (function (id) {
$http.get($rootScope.api_url + 'sales/' + id + '/download')
.then(function (response) {
var resp = response.data;
var blob = new Blob([resp], {type : 'application/pdf'});
saveAs(blob, folio + ".pdf"); //yup, I'm using SaveAs.js
}, function (reason) {
alert("The file weren't downloaded");
});
});
The code mentioned above downloads me a pdf file... But it is white!
So, after open both PDF's (one generated from the backend and another generated from the js script) it appears me with some chars I can't read (literally, I can't read)
So, my question is, how can I download the file using a different encode? And, which is the better way to encode this file to avoid the loss of chars?

save a field value to a file on desktop

I am developing a custom application in "ServiceNow" which requires Javascript and HTML coding. So, I have a field say, "description" on my form. How may I save this field's value to a word document on the desktop?

While JavaScript cannot create a file for you to download by itself, ServiceNow does have a way for you to create one. Creating a Word document is impossible without the use of a MID server and some custom Java code, but if any file type will do you can create an Excel file using an export URL. To test this out, I made a UI Action in a developer instance running Helsinki on the Problem table. I made a list view that contains only the field that I wanted to save, and then used the following code in the UI action:
function startDownload() {
window.open("https://dev13274.service-now.com/problem_list.do?EXCEL&sysparm_query=sys_id%3D" +
g_form.getUniqueValue() + "&sysparm_first_row=1&sysparm_view=download");
}
When the UI action is used, it opens a new tab that will close almost immediately and prompt the user to save or open an Excel file that contains the contents of that single field.
If you want to know more about the different ways you can export data from ServiceNow, check their wiki-page on the subject.

You can use the HTML5 FileSystem API to achieve that
window.requestFileSystem(window.PERSISTENT, 1024*1024, function (fs) {
fs.root.getFile('file.txt', {create: true}, function(fileEntry) {
fileEntry.createWriter(function(fileWriter) {
var blob = new Blob([description.value], {type: 'text/plain'});
fileWriter.write(blob);
});
});
});
FYI, chrome supports webkitRequestFileSystem.
Alternatively, use a Blob and generate download link
var text = document.getElementById("description").value;
var blob = new Blob([text], {type:'text/plain'});
var fileName = "test.txt";
var downloadLink = document.createElement("a");
downloadLink.download = fileName;
downloadLink.href = window.webkitURL.createObjectURL(textFile);
downloadLink.click();

Javascript protects clients against malicious servers who would want to read files on their computer. For that reason, you cannot read or write a file to the client's computer with javascript UNLESS you use some kind of file upload control that implicitely asks for the user's permission.

IS it possible to specify where to download a file in hyperlink

I am trying to download a file via an hyperlink after converting a html table to csv, here is my code:
function exportTableToCSV($table, filename) {
var $rows = $table.find('tr'),
...
csv = '"' + $rows.map(function (i, row) {
...
// Data URI
csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
$(this)
.attr({
'download': filename,
'href': csvData,
'target': '_blank'
});
}
It works fine , onclick the hyperlink a "save as" pop up window is opened to save the file and download it.I don't want to pop up the "save as" but automatically download the file to the default download location set in the browser.
Is there any idea to get the download location and set it appropriately. Any help will be appreciated.

No. For security reason, browsers doesn't allow to write anything in client side filesystem without user interaction.
Otherwise you could overwrite its files from server side.

You can link your file and add download attribute like so:
file CSV (2Kb)
[edit] I'm not sure to answer the question ...

Start downloading file using JQuery

I want to start file downloading when I clicked the button.
I just have the path of the file.
How can I start downloading?
This is what I tried so far:
$('#download_button').click(function(){
var filepath = $(this).attr('data-filepath');
var do = 'file';
$(body).append(do);
});
What I am doing wrong.
I never want to redirect the page.
Is downloading start in browser or in software for downloading files if installed on client machine

Alternatively you can also set the top.location
$('#download_button').click(function(){
var filepath = $(this).attr('data-filepath');
top.location.href = filepath;
});

You cannot force a file to be downloaded in JavaScript.
What you can do is location.href = "somefile.ext";, however it will only be downloaded if the server includes Content-Disposition: attachment as one of its response headers to that file request.

If you want to download a file to the client, then do this:
$('#download_button').click(function(){
var filepath = $(this).attr('data-filepath');
location.href = filepath;
});
location.href will look for a page, but it will not find anything, so it will download the file instead.

You can create a form using jQuery and use the submit function. This will not change the URL in the address bar.
$('#download_button').click(function(){
var filepath = $(this).attr('data-filepath');
var form = $('<form>').attr('action', filepath);
form.submit();
});