Develop Reference

New window and incorrect filename when saving data as CSV file

I am getting some CSV data from an Ajax request. I am trying to use FileSaver.js (https://github.com/eligrey/FileSaver.js/) to enable the end-user directly download this data as a CSV file.
This is the code used in my Ajax request handler.
jQuery.post(urlPrefix + "/api/ReportData",
dataToPost,
function (data, status) {
var blob = new Blob([data], { type: "text/csv" });
var fileName = "";
fileName += "Data-Export";
fileName += ".csv";
saveAs(blob, fileName);
});
This code is called from a button click event. Whenever the code executes, a new tab is opened, and the file is saved without a csv extension. In fact, the downloaded file has no extension at all. See the attached screenshot for details. The (7) is due to this being my seventh download.
The actual file that is saved is a valid file. If I manually set its extension to csv, I can use it properly. But I want to know how to use FileSaver to generate appropriate extension, and also download the file without opening a new tab.
What I have already tried
Export to CSV using jQuery and html

I found out this link https://code-maven.com/create-and-download-csv-with-javascript where it is possible to create a hidden anchor tag and download the file.
My new code is below
jQuery.post(urlPrefix + "/api/ReportData",
dataToPost,
function (data, status) {
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(data);
hiddenElement.target = '_blank';
hiddenElement.download = 'Exported-Data.csv';
hiddenElement.id = "customTemporaryAnchor";
hiddenElement.click();
jQuery("#customTemporaryAnchor").remove();
});
When this code is executed, the file downloads with proper extension, and without any popup or new tab.

return pdf instead of pdf url from laravel

I am using laravel. I don't want to return url of the pdf to the front-end, as it's located in google cloud and i don't want the link to be seen. That's why I need to return pdf directly and let user download it through browser.
I tried this:
return response()->json(['data' => file_get_contents(Storage::url($cert_path))]);
//this says: malformed utf-8 characters, 500 error
Then I googled and tried this:
$file = file_get_contents(Storage::url($cert_path));
$file = mb_convert_encoding($file, 'HTML-ENTITIES', "UTF-8");
return response()->json(['data'=>$file]);
//this returns pdf, but in front, when i have a download code of js, when I download it, the whole pdf is empty.
The url of the pdf is correct, as I can go to that url and see the pdf.
how do I return pdf successfully?
I will also include javascript download code:
var blob = new Blob([pdf], {
type: 'application/pdf'
});
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = "ffa.pdf";
link.click();

In node/js, how can I display a text file that I fetched in the browser window?

I have a protected API that fetches the contents of a file. By protected I mean, I need to send in Authorization headers before the API will allow me to fetch the file contents.
How do I display this in a browser window?
Currently, my nodejs backend is returning the contents with Content-Type:text/html
On the frontend, my current code looks like this
$http.get(downloadUrl)
.then(function(resp) {
var data = resp.data;
var blob = new Blob([data], { type: "text/html" });
let objectUrl = (window.URL || window.webkitURL).createObjectURL( blob );
let anchor = document.createElement("a");
anchor.href = objectUrl;
anchor.download = 'source.html';
anchor.click();
window.URL.revokeObjectURL(objectUrl);
This just download the file though. I just want to display it, preferably in a new window.
Edit I believe this is a duplicate of this question and there is no front-end-only solution to it. It requires the backend to play a part, such as implementing a "Holder-Of-Key Authentication Scheme"

Replace file blob in browser?

I asked this earlier but someone down voted and accused me of trying to write files to local filesystem without reading.
I have website in an enterprise environment which will only ever be accessed in chrome so keep that in mind.
I am able to select a local folder on my PC and open all sub-folders and files in the browser. I'm using client side javascript to parse these files and look for a particular kind of .xml file that is used internally to render a powerpoint like presentation. I can make changes to this xml file and spit it back out as a blob.
What I would like to do but don't know how is replace the data or blob in the original file with the modified data/blob.

Can the user interact with the data blob? If so, you can use a save file function and overwrite the original.
function saveFile( data )
{
var textFileAsBlob = new Blob([yourData], {type:'text/plain'});
//or replace the code above with your already formed blob
var fileNameToSaveAs = "File_Name_Goes_Here.xml";
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
//downloadLink.innerHTML = "Download File";
if (window.webkitURL != null){
// Chrome allows the link to be clicked
// without actually adding it to the DOM.
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
}
else{
// Firefox requires the link to be added to the DOM
// before it can be clicked.
try {
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
}
catch( e ){
console.log("error saving firefox file")
}
// IE 10+
try {
window.navigator.msSaveBlob(textFileAsBlob, fileNameToSaveAs);
}
catch(e){
console.log("error saving IE file")
}
}
try {
downloadLink.click();
}
catch(e) {
console.log("Unable to click the download link. Are you using IE?")
}
}
I grabbed this code from somewhere else on stack overflow. I can't remember who it's from though to provide attribution :-(

not retrieving data from a Blob

my project is about recording audio using html5.I'm saving the audio in a blob.I want to use the data in that blob to convert it to mp3 or any other format using ffmpeg,my problem is that when calling the fileName of the audio, it's giving me an error that invalid data was found when calling input.In other words, its not reading the fileName of the audio I'm recording.
here is my code for saving the fileName and downloading it:
var blob = new Blob ( [ view ], { type : 'audio/wav' } );
// let's save it locally
// let's save it locally
document.getElementById('output').innerHTML = 'Handing off the file now...';
var url = (window.URL || window.webkitURL).createObjectURL(blob);
console.log(url);
var link = window.document.createElement('a');
link.href = url;
link.download = 'output.wav';
var fileName=link.download;
console.log(link.download);
my question is: why I can't retrieve the fileName of the audio file.although in the console its getting me back the name of the file, but when accessing that file it gives me no data to be found.what is going wrong??