多个 Pdf 查看器通过 Vue Pdf App 组件添加同一页面

Question

我想通过一个组件在同一页面上显示两个不同的 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;
}

这是我在 codepen 上的代码 https://codepen.io/canbeywas/pen/yLMpEBg

Answer 1

你可以通过稍微修改你的代码来解决这个问题：

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;
}