Giter VIP home page Giter VIP logo

Comments (4)

FranckFreiburger avatar FranckFreiburger commented on June 12, 2024 2

see https://github.com/FranckFreiburger/vue-pdf#example---display-multiple-pages-of-the-same-pdf-document

from vue-pdf.

andreasvirkus avatar andreasvirkus commented on June 12, 2024

Ping, any ETA on this?

from vue-pdf.

andreasvirkus avatar andreasvirkus commented on June 12, 2024

I currently used an ugly workaround, but it feels like a lot of
overhead to render N instances of vue-pdf:

<template>
  <section>
    <spinner v-if="loading">
    <template v-else>
      <!-- Need to load a single page to get page count -->
      <pdf style="display: none;" :src="contract"
        @num-pages="pageCount = new Array($event)" />
      <!-- Actual document -->
      <pdf v-for="(page, index) in pageCount"
        :key="index"
        :src="contract"
        :page="index + 1"
        class="contract-container" />
    </template>
  </section>
</template>

<script>
  import pdf from 'vue-pdf';

  export defualt {
    components: { pdf },
    data() {
      return {
        loading: true,
        pageCount: [],
        contract: { data: '' }
      }
    }
  }
</script>  

from vue-pdf.

jerrychong25 avatar jerrychong25 commented on June 12, 2024

If u wanna with scroll whole PDF document with full size pages, using @FranckFreiburger (https://github.com/FranckFreiburger/vue-pdf#example---display-multiple-pages-of-the-same-pdf-document) example, plus just change styling to height with 100%, as per following:

<pdf
     v-for="i in numPages"
     :key="i"
     :src="src"
     :page="i"
     style="height: 100%"
></pdf>

Then it will be working as per expected.

from vue-pdf.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.