title: Can I set the filename of a PDF object displayed in Chrome?
body: <p>In my Vue app I receive a PDF as a blob, and want to display it using the browser's PDF viewer.</p>
  
  <p>I convert it to a file, and generate an object url:</p>
  
  <pre><code>const blobFile = new File([blob], `my-file-name.pdf`, { type: 'application/pdf' })
  this.invoiceUrl = window.URL.createObjectURL(blobFile)
  </code></pre>
  
  <p>Then I display it by setting that URL as the <code>data</code> attribute of an object element.</p>
  
  <pre><code>&lt;object
    :data="invoiceUrl"
    type="application/pdf"
    width="100%"
    style="height: 100vh;"&gt;
  &lt;/object&gt;
  </code></pre>
  
  <p>The browser then displays the PDF using the PDF viewer. However, in Chrome, the file name that I provide (here, my-file-name.pdf) is not used: I see a hash in the title bar of the PDF viewer, and when I download the file using either 'right click -> Save as...' or the viewer's controls, it saves the file with the blob's hash (<code>cda675a6-10af-42f3-aa68-8795aa8c377d</code> or similar).</p>
  
  <p>The viewer and file name work as I'd hoped in Firefox; it's only Chrome in which the file name is not used.</p>
  
  <p>Is there any way, using native Javascript (including ES6, but no 3rd party dependencies other than Vue), to set the filename for a blob / object element in Chrome?</p>
  
  <p>[edit] If it helps, the response has the following relevant headers:</p>
  
  <pre><code>Content-Type: application/pdf; charset=utf-8
  Transfer-Encoding: chunked
  Content-Disposition: attachment; filename*=utf-8''Invoice%2016246.pdf;
  Content-Description: File Transfer
  Content-Encoding: gzip
  </code></pre>