Develop Reference

How to rename pdf which saved on Server while opening in new tab

I'm writing a web application that, among other things, allows users to upload files to my server. In order to prevent name clashes and to organize the files, I rename them once they are put on my server.
My question is, is there any way to specify the name of a file to be downloaded.? So a user uploads a file named 'abc.pdf' and I rename it to '10.pdf', but when they download it I want the browser to save the file as 'abc.pdf' by default. is there any way to do it?
I referred this question
How to set name of file downloaded from browser?
But in my case, I am opening pdf by in new tab from javascript. when clicking on pdf will get the id which is equal to the name stored in the server, with that id will refer DB and fetch actual name using ajax. But How will I rename the filename from id to actual name?
$(document).on('click', '.file', function (e) {
var id = this.id+'.pdf';
$.ajax({
url: "<?php echo base_url() ?>/Directorylist/files",
type: "POST",
datatype: 'json',
success: function (data) {
var actual_name = data;
var win = window.open();
win.location.href="http://localhost:8080/panExplorer/uploads/"+id+"";
},
});
});

You can try to create a tag append it to body (it work without this in chrome but it require to be in document in Firefox) and click on it, (you need to call native click not jQuery method).
function download(url, fname) {
var a = $('<a/>').attr({
href: url,
download: fname,
target: '_blank'
}).appendTo('body');
a[0].click(); // native DOM function
a.remove();
}
and instead of
var win = window.open();
win.location.href="http://localhost:8080/panExplorer/uploads/"+id+"";
use:
download("http://localhost:8080/panExplorer/uploads/" + id, "some_other.pdf");
EDIT:
The other solution would be to create php file that will be proxy in downloading the files and you use same code but forward to the php file:
var win = window.open();
win.location.href="http://localhost:8080/panExplorer/download.php?file="+id;
and in download.php file you use:
// and you should check if there are no ".." in the filename,
// so no one will download your source code with `file=../index.php`
readfile("./upload/" . $_GET['file']);
and use solution from to download files How to set name of file downloaded from browser?
EDIT:
if you need to open the file but no download here is solution:
You need url that will have proper name so it need to end with /filename.pdf, the simplest way is to use url that look something like this:
/UploadFiles/id/your_filename.pdf
and you need to write script (or route in in your framework) that will open id and ignore the filename, the filename will be used by browser.

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/

CasperJS download and save file to specific location

I'm a beginner programmer and I'm trying to download and temporarily save a file using casperjs.
casper.start("http://www.google.fr/", function() {
var path = 'C:/WINDOWS/TEMP/logo.png';
fs.write(path, this.download("http://www.google.fr/images/srpr/logo3w.png"), 'w');
});
I've tried opening the file in photo viewer, and it reads 'photo viewer does not support the file format'

From the documentation:
Istead of fs.write, use:
this.download("http://www.google.fr/images/srpr/logo3w.png", path);
Hope this helps.

How to save html that was modified on the browser (the DOM) with Javascript/jQuery

First of all let me clarify that what I'm trying to do is for locally use only, users will have direct access to the html page.
What I'm trying to do is basically append and save text to an HTML file.
This is what I have.
HTML (index.html)
<div id="receiver"></div>
<button id="insertButton">Insert</button>
JS
$(document).ready( function() {
$('#insertButton').click(function(){
$('#receiver').append('<h1>Hi,</h1>','<p>How are you?</p>');
})
});
What I don't know is how to save the file (index.html) after the appending. Any idea how to do that? Is this even possible with Javascript or jQuery?

You could change your handler to do this:
$(document).ready( function() {
$('#insertButton').click(function(){
$('#receiver').append('<h1>Hi,</h1>','<p>How are you?</p>');
// Save the page's HTML to a file that is automatically downloaded.
// We make a Blob that contains the data to download.
var file = new window.Blob([document.documentElement.innerHTML], { type: "text/html" });
var URL = window.webkitURL || window.URL;
// This is the URL that will download the data.
var downloadUrl = URL.createObjectURL(file);
var a = document.createElement("a");
// This sets the file name.
a.download = "source.htm";
a.href = downloadUrl;
// Actually perform the download.
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
})
});
You should take a look at the compatibility matrix and documentation of URL over at MDN. Notably URL is not available for IE 9 or earlier. Same for Blob.

If I understand it correctly, you need it on local machine and for temporary usage then you can store it in cookies.
So whenever you load the page, check if cookie available, if yes then load data from cookies or load the fresh data.
You can use this data, unless and until cookies are not cleared.
Hope this helps...

Don't need any javascript. After the html is appended, just press Ctrl+S to save the file locally with modified html.

Export CSV using javascript and aspx

I have to make a downloadable CSV file when click on the HTML button. I have created CSV data in my Javascript when click on the button. My question is how to write the data to a CSV file and make it downloadable. I have tried HTML5 download attribute to download the CSV file in client side. But HTML5 download attribute not supported by Internet Explorer. So I need to know how to pass the CSV data to ASPX and make it downloadable. Please advise. Thanks in advance.

I have this code to download a csv from a webpage:
JS function:
function downloadCSV(csv_out) {
var blob = new Blob([csv_out], { type: 'text/csv;charset=utf-8' });
var url = window.URL || window.webkitURL;
var link = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
link.href = url.createObjectURL(blob);
link.download = "filename.csv";
var event = document.createEvent("MouseEvents");
event.initEvent("click", true, false);
link.dispatchEvent(event);
}

I am assuming you want to have Javascript only solution.
Then you can do following:
var looongCSVTEXT = ''
document.location ='data:Application/vnd.ms-excel,' +
encodeURIComponent(looongCSVTEXT);
UPDATE:
on your page add
<input type='hidden' id='Hidden' runat='server' />
then in javascript (setting mechanism might be different, its up to you how you set CSV data to hidden control)
$('button').on('click', function(){ $('#Hidden').val(CSVData);});
then read the data from hidden control on the server side, and respond with excel file.
If you do not want to save it to disk first read this