Chrome - add filename and download name to base64 encoded PDF in iframe viewer

Question

I am encoding a PDF as base64 data, and am displaying this data in an iFrame as such in my react app:

<iframe
  src={`data:application/pdf;base64,${
    this.props..encodedPdf
  }`}
/>

This renders nicely, but because of the B64 encoded data, the PDF has this at the top:

Additionally when I download it, it's saved as download.pdf

Is there any way to change the title or the download name?

Answer 1

I found a workaround for this problem in my app. It seems that chrome browser get title from file url. Therefore I created a method named Invoice, and that method returns file stream instead of base64 encoded data.

Below method is coded in asp.net core mvc.

public async Task<IActionResult> Invoice(string content)
 {
     try
     {
         var stream = new MemoryStream(Convert.FromBase64String(content));

         System.Net.Mime.ContentDisposition cd = new System.Net.Mime.ContentDisposition
         {
             FileName = "invoice.pdf", //this name is used for downloaded file
             Inline = true  // false = prompt the user for downloading;  true = browser to try to show the file inline
         };
         Response.Headers.Add("Content-Disposition", cd.ToString());
         Response.Headers.Add("X-Content-Type-Options", "nosniff");

         return File(stream, "application/pdf");
     }
     catch (Exception ex)
     {
         _logger.LogError(ex, "FileViewer Error Occured");
         return new EmptyResult();
     }
 }