Question

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

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

但后来我想先用ajax（在javascript文件中）获取文件，在JavaScript中编辑它的源代码，然后创建一个<object>并为其提供结果数据。问题是Object需要在其data属性中使用url，并且不直接接受实际数据。我怎么处理这个？有没有办法创建一个假的网址＆＃34;以javascript为例？或者我可以以某种方式将数据以另一种方式传递给对象？或者我应该使用其他标签？
提前致谢并抱歉我的英文

Answer 1

您实际上并不需要网址。您可以将PDF转换为base64并将data属性设置为数据本身。您只需要在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

直接为Object标记提供数据

2 个答案: