sandanat / vue-pdf-app

VUEjs v2 PDF viewer based on Mozilla's PDFJS

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How can I handle or get DOM object of page in PDF

ypinchina opened this issue · comments

commented

I'd like to use it to achieve some work. How can I handle or get DOM object of page in PDF.
<vue-pdf-app style="height: 100vh;" :pdf="pdfSrc" ref='pdfDom'></vue-pdf-app> <button @click="getPdfDom">??</button> getPdfDom() { console.log(this.$refs.pdfDom.$refs) }

Hi, @ypinchina

<template>
  <div style="height: 98vh">
    <button @click="interact" type="=:button">Interact with page</button>
    <VuePdfApp @after-created="afterCreated" pdf="sample.pdf" />
  </div>
</template>

<script>
import VuePdfApp from "vue-pdf-app";

export default {
  components: {
    VuePdfApp,
  },
  methods: {
    async interact() {
      if (!this.pdfjs) return;

      await this.pdfjs.pdfViewer.pagesPromise;
      console.log(document.querySelectorAll(".page"));
    },
    afterCreated(pdfjs) {
      // non-reactive
      this.pdfjs = pdfjs;
    },
  },
};
</script>

<style>
@import "https://unpkg.com/vue-pdf-app@2.0.0/dist/icons/main.css";
</style>

Example