Vue.js 多个Pdf查看器通过Vue Pdf应用程序组件添加同一页面

我想通过一个组件在同一页上显示两个不同的pdf文件（pdf和pdf2）。 当我试着喜欢下面的内容时，第二个pdf文件没有显示在页面中。你有什么建议吗

  <div id="app">
      <vue-pdf-app style="height: 50vh;" :pdf="pdf" :config="config"></vue-pdf-app>
      <vue-pdf-app style="height: 50vh;" :pdf="pdf2" :config="config"></vue-pdf-app>
    </div>

这是我的javascript代码

new Vue({
  components: {
    VuePdfApp: window["vue-pdf-app"]
  },
  data() {
    return {
      config: {
        toolbar: {
          toolbarViewerLeft: { findbar: false }
        }
      },
      pdf: getPdf(),
      pdf2: getPdf()
    };
  }
}).$mount("#app");

function getPdf() {
  const pdf2 =" base 64 string pdf";
  
  const pdf = "base 64 string pdf1 ";

  return base64ToArrayBuffer(pdf);
}

function base64ToArrayBuffer(base64) {
  var binary_string = window.atob(base64);
  var len = binary_string.length;
  var bytes = new Uint8Array(len);
  for (var i = 0; i < len; i++) {
    bytes[i] = binary_string.charCodeAt(i);
  }
  return bytes.buffer;
}

newvue({
组成部分：{
VuePdfApp:窗口[“vue pdf应用程序”]
},
数据（）{
返回{
配置：{
工具栏：{
toolbarViewerLeft:{findbar:false}
}
},
pdf:getPdf（），
pdf2:getPdf（）
};
}
}).$mount（“#app”）；
函数getPdf（）{
const pdf2=“基本64字符串pdf”；
const pdf=“基本64字符串pdf1”；
返回base64ToArrayBuffer（pdf）；
}
函数base64到ArrayBuffer（base64）{
var binary_string=window.atob（base64）；
var len=二进制字符串长度；
var字节=新的Uint8Array（len）；
对于（变量i=0；i

这是我在代码笔上的代码

---

您可以通过如下方式稍微修改代码来解决此问题：

new Vue({
  components: {
    VuePdfApp: window["vue-pdf-app"]
  },
  data() {
    return {
      config: {
        toolbar: {
          toolbarViewerLeft: { findbar: false }
        }
      },
      pdf: getPdf(),
      pdf2: getPdf2()
    };
  }
}).$mount("#app");

function getPdf() {
  const pdf = "base 64 string pdf1 ";

  return base64ToArrayBuffer(pdf);
}

function getPdf2() {
  const pdf = "base 64 string pdf2 ";

  return base64ToArrayBuffer(pdf);
}

function base64ToArrayBuffer(base64) {
  var binary_string = window.atob(base64);
  var len = binary_string.length;
  var bytes = new Uint8Array(len);
  for (var i = 0; i < len; i++) {
    bytes[i] = binary_string.charCodeAt(i);
  }
  return bytes.buffer;
}

newvue({
组成部分：{
VuePdfApp:窗口[“vue pdf应用程序”]
},
数据（）{
返回{
配置：{
工具栏：{
toolbarViewerLeft:{findbar:false}
}
},
pdf:getPdf（），
pdf2:getPdf2（）
};
}
}).$mount（“#app”）；
函数getPdf（）{
const pdf=“基本64字符串pdf1”；
返回base64ToArrayBuffer（pdf）；
}
函数getPdf2（）{
const pdf=“基本64字符串pdf2”；
返回base64ToArrayBuffer（pdf）；
}
函数base64到ArrayBuffer（base64）{
var binary_string=window.atob（base64）；
var len=二进制字符串长度；
var字节=新的Uint8Array（len）；
对于（变量i=0；i

非常感谢，但这不起作用：（如果可能的话，你能给我看看“codepen.io”上的工作版本吗？再次感谢。