在我的 Vue 应用程序中,我收到一个 Blob 格式的 PDF,并希望使用浏览器的 PDF 查看器显示它。
我将其转换为文件,并生成一个对象 url:
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 以外的第 3 方依赖项)在 Chrome 中为 blob/对象元素设置文件名?
[编辑] 如果有帮助,响应具有以下相关标题:
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