We have an application that gets some input parameters and sends them to the back end where they get processed. The processing result is a PDF file that we want to open in a new tab.
The code doing this looks similar to the below:
let response = await myService.getDocument();
let file = new Blob([response.data], {type: 'application/pdf'});
let fileURL = URL.createObjectURL(file);
window.open(fileURL, '_blank');
Everything works fine but the URL in the browser shows some random generated string as below:
blob:http://localhost:3000/85cad96e-e44e-a1f9-db97a96ed3fe
Obviously this does not look very good to the end user and we would prefer to display something which is meaningful to the user, say something like:
blob:ftp://localhost:3000/my_document_name_or_whatever
Short answer, You can't.
This is an address that points to the browser's memory, where it has stored your blob, or a pointer to the original file in case of user uploaded file through the input type=file.
This is somehow by design. You can create multiple of these blobURLs from the same Blob. If they were to use a filename as URI, you couldn't.
Theoretically, it should be possible for you to dynamically create a page that would redirect to the BlobURI, and you could name this redirection page as you which. But this is just theory, I never tried to do it myself.
A rough proof of concept can be seen in this plunker, obviously, you'll need to generate blobRename.html dynamically, and change its name to the one you want, and also force it's content-header so that the browser thinks it's an html page if you want to get rid of the .html.
Also note that it doesn't seem to work with pdf files, which need browser plugins to trigger in, but with some more work, it may be possible to hack something around.
But anyway, I would just let the random url, your users will get more and more used to it as more and more web apps do use this great API.