Question

在我的Vue应用程序中，我收到一个PDF斑点，并希望使用浏览器的PDF查看器显示它。

我将其转换为文件，并生成对象网址：

const blobFile = new File([blob], `my-file-name.pdf`, { type: 'application/pdf' })
this.invoiceUrl = window.URL.createObjectURL(blobFile)

然后，通过将该URL设置为对象元素的data属性来显示它。

<object
  :data="invoiceUrl"
  type="application/pdf"
  width="100%"
  style="height: 100vh;">
</object>

然后，浏览器使用PDF查看器显示PDF。但是，在Chrome中，未使用我提供的文件名（此处为my-file-name.pdf）：我在PDF查看器的标题栏中看到一个哈希，并且在使用“右键单击”下载文件时->另存为...”或查看者的控件，它会使用blob的哈希（cda675a6-10af-42f3-aa68-8795aa8c377d或类似名称）保存文件。

查看器和文件名可以像我在Firefox中所希望的那样工作；这只是不使用文件名的Chrome。

是否可以使用本机Javascript（包括ES6，但Vue除外，但没有第三方依赖）来设置Chrome中Blob /对象元素的文件名？

[edit]如果有帮助，则响应具有以下相关的标题：

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

Answer 1

Chrome的扩展名似乎依赖于URI中设置的资源名称，即file.ext中的 protocol://domain/path/file.ext 。

因此，如果您的原始URI包含该文件名，那么最简单的方法可能就是将您的

我可以设置Chrome中显示的PDF对象的文件名吗？

3 个答案: