vue-pdf-embed 不使用 source 直接传递 pdf 数据

Vue-PDF-Embed是一个用于在Vue.js应用中嵌入PDF文件的库，它通常会推荐使用`<iframe>`标签配合`src`属性来加载外部PDF源。如果你不想直接通过`src`引用PDF数据，而是希望在前端处理并传递pdf内容，你可以尝试以下几种方式：

1. **Base64编码**: 将PDF转换成Base64字符串，并将其作为`data-url`属性赋给`iframe`的`src`。首先你需要将PDF读取到内存中，然后使用JavaScript的`btoa()`函数进行编码。

<template>
  <div>
    <iframe :src="pdfDataUrl" frameborder="0"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pdfDataUrl: "",
    };
  },
  created() {
    // 假设pdfData是从服务器获取或本地存储得到
    const pdfData = ...;
    this.pdfDataUrl = `data:application/pdf;base64,${window.btoa(pdfData)}`;
  },
};
</script>

2. **使用FileReader API**: 另一种方式是使用浏览器的FileReader API，在前端读取PDF文件内容，然后设置iframe的`contentDocument`或`contentWindow.document`属性。

created() {
  const fileInput = document.createElement('input');
  fileInput.type = 'file';
  fileInput.onchange = async (event) => {
    const file = event.target.files;
    const reader = new FileReader();
    reader.readAsDataURL(file);
    await new Promise((resolve) => reader.onloadend = resolve);
    this.pdfDataUrl = reader.result;
  };
  fileInput.click();
}

这两种方法都有其局限性，比如Base64可能会导致URL过长、性能下降，而FileReader则受限于同源策略。所以，如果条件允许，直接通过`src`链接外部PDF文件通常是更简单、更高效的做法。如果确实有特殊需求，可以考虑使用一些服务端渲染或者离线存储解决方案来绕过这些问题。