11

我想在我的网站中嵌入一个 PDF 文件，它看起来像这样：

<object data="data/PDFTest1.pdf" type="application/pdf" id="data"></object>

但后来我想先用 ajax 获取文件（在一个 javascript 文件中），用 JavaScript 编辑它的源代码，然后创建一个<object>并给它结果数据。问题是 Object 在其data属性中需要一个 url，并且不直接接受实际数据。我该如何处理？

例如，有没有办法在 javascript 中创建“假网址”？

或者我可以以其他方式将数据传递给对象吗？

或者我应该使用其他标签吗？

在此先感谢并为我的英语感到抱歉。

4

2 回答 2

20

您实际上并不需要 URL。您可以将 PDF 转换为 base64 并将数据属性设置为数据本身。您只需在 base64 前面加上“data:”，然后是 mime 类型、分号、“base64”，然后是表示 PDF 的 base64 编码字符串。 

<object data="data:application/pdf;base64,YOURBASE64DATA" type="application/pdf"></object>
于 2017-04-05T20:53:04.667 回答
8

我知道这有点老了，但我想扩展所选答案以及如何使用FileReader.readAsDataURL.

这是一个包装在 Promise 中的示例。

export function blobAsDataUrl (blob) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();

    reader.onload = (event) => {
      resolve(event.target.result);
    };
    reader.onerror = (error) => {
      reader.abort();
      reject(error);
    };

    reader.readAsDataURL(blob);
  });
}

// Handle the promise however you like
// This is in the format: data:application/pdf;base64,BASE64DATA
let data_url_for_object = await blobAsDataUrl(<Blob or File>);

https://developer.mozilla.org/en-US/docs/Web/API/FileReader

于 2019-08-14T21:31:54.223 回答