html - 数据 URI 哈希参数(隐藏数据 URI 的 PDF 工具栏)

Question

我有一个 PDF base64 编码数据 URI。

例如:

return <object data="data:application/pdf;base64,JVBERi0xLjMKJf////8KOCAwIG9...VmCjI0MTU4OAolJUVPRgo=" type="application/pdf"></object>

我可以毫无问题地将它嵌入到页面中。但是，默认情况下，浏览器在 PDF 中包含一个工具栏。

似乎禁用此工具栏的唯一方法是在 url 末尾包含一些哈希参数。

例如。

<object data="path/to/file.pdf#toolbar=0&navpanes=0&scrollbar=0" type="application/pdf"></object>

如果通过相对路径或 URL 访问 PDF 时效果很好，但我想不出一种方法来使用数据 URI。

有什么方法可以在 URI 末尾包含这些哈希参数吗？

或者有人知道用其他方式隐藏此工具栏的方法吗？

非常感谢任何帮助。提前致谢。 :)

Answer 1

就像 kolin 所说的那样，没有办法直接发送带有数据 URI 的查询字符串。但是，您可以将数据 URI 切换为 blob URL 并在其中传递参数。

只需获取您的 base64 数据并将其转换为 pdf blob，如下所示:

function b64toBlob(b64Data, contentType) {
var byteCharacters = atob(b64Data)

var byteArrays = []

for (let offset = 0; offset < byteCharacters.length; offset += 512) {
    var slice = byteCharacters.slice(offset, offset + 512),
        byteNumbers = new Array(slice.length)
    for (let i = 0; i < slice.length; i++) {
        byteNumbers[i] = slice.charCodeAt(i)
    }
    var byteArray = new Uint8Array(byteNumbers)

    byteArrays.push(byteArray)
}

var blob = new Blob(byteArrays, { type: contentType })
return blob}

然后使用 createObjectURL创建 URL 的方法，您可以像这样放置查询字符串:

URL.createObjectURL(b64toBlob(data.buffer.data, 'application/pdf')) + '#toolbar=0&navpanes=0&scrollbar=0'

将对象的数据属性设置为生成的字符串，您将拥有它。