直接为对象标签提供数据

Question

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

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

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

有没有办法在 javascript 中创建一个“假 url”？

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

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

提前致谢，对不起我的英语。

Answer 1

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

<object data="data:application/pdf;base64,YOURBASE64DATA" type="application/pdf"></object>

Answer 2

我知道这有点老了，但我想通过如何使用 FileReader.readAsDataURL.

生成数据 url 来扩展所选答案

这是一个包装在 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

直接为对象标签提供数据

Providing the Object tag with data directly

javascript

html

pdf

object-tag