I am currently working on a web page, which gives the possibility of downloading reports in pdf format. The report is generated on the server and the request is made through "Json". Once the response is obtained, the "pdf" document is displayed in a new browser tab. The problem I have is that the file name is kept in a base64 format (very very long).
Is there a way to change this file name?
My code that currently works:
$(document).on('click', '.pdfInforme', function (e) {
e.preventDefault();
var data = $(this).attr("ord");
var d = data.split("*");
var ord = d[0];
var pac = d[1];
$('#loading-indicator').show();
var $modal = $(this);
$.ajax({
type: "POST",
url: 'Download.aspx/ServerRequest',
contentType: 'application/json',
dataType: 'json',
data: JSON.stringify({ 'ord': ord }),
success: function (result) {
//pdf
//Is Firefox?
var nav = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
var byteCharacters = atob(result.d);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var file = new Blob([byteArray], { type: 'application/pdf;base64' });
const dataURI = result.d;
const blob = file;
const url = URL.createObjectURL(blob);
const blobAnchor = document.createElement('a');
const dataURIAnchor = document.createElement('a');
blobAnchor.download = 'Informe_' + pac + '_' + ord;
dataURIAnchor.download = 'Informe_' + pac + '_' + ord;
blobAnchor.className = 'hidden';
blobAnchor.href = url;
dataURIAnchor.href = dataURI;
document.body.appendChild(blobAnchor);
blobAnchor.onclick = function () {
requestAnimationFrame(function () {
URL.revokeObjectURL(url);
setTimeout(() => blobAnchor.remove(), 300);
});
};
if(nav)
blobAnchor.click();
else
window.open(blobAnchor, '_blank');
$("#downloadzip").remove();
$('#loading-indicator').hide();
},
error: function (req, status, error) {
alert(error);
}
});
});
I have tried: (It only works to change the title of the new tab)
document.title="New File Name";
I found a solution for chrome and edge (very close to solving it):
Download PDF not working with Firefox using Angular 2 and Node
Using this solution i can open a file in a new tab with a short name (eg "0a06ff23-cea1-417b-87ac-ec591315786e") using "blob". But, I still can't modify file name to another default name.
On the other hand, this method does not work in Firefox, where new tab does not even open (it does in Chrome and Edge). In any case, it would be at least a partial solution.
Upgrade
I noticed that Firefox was downloading the file instead of opening it in a new tab. Therefore, I check if it is a firefox browser, and perform different actions for each case. In case of Firefox, the file is downloaded with the default name I chose, and when the browser is Chrome or Edge, the file opens in a new tab with a name similar to "0a06ff23-cea1-417b-87ac- ec591315786e". It is tested on Android and Apple, and in both cases the possibility of downloading the file is given and then it opens automatically.