How to achieve PDF zoom in and out

[shenzhirong]

How to achieve PDF zoom in and out

[GergelyLakatos]

Could somebody solve this problem?

[FranckFreiburger]

You can achieve zoom by increasing the pdf width. example:

<pdf
  src="https://cdn.mozilla.net/pdfjs/tracemonkey.pdf"
  style="width: 300%"
></pdf>

[GergelyLakatos]

Thanks @FranckFreiburger ! :)

[zealot128]

For every body finding this link, using v-dragscroll does help a lot. Here is a starting point for everybody who needs to implement a zoom with drag scrolling.

<button class="btn btn-sm btn-secondary" @click='zoom += 20'>
<i class="mdi mdi-magnify-plus-outline"></i></button>

<button class="btn btn-sm btn-secondary" :disabled='zoom == 100' @click='zoom -= 20'>
<i class="mdi mdi-magnify-minus-outline"></i></button>

<div class='pdf-viewer-wrapper' v-dragscroll='true' :class='{"zoom-active": zoom > 100 }')
 <pdf .../>
</div>

<script>
import pdf from 'vue-pdf'
import { dragscroll } from 'vue-dragscroll'

export default {
    directives: { dragscroll },
    components: { pdf },
    data() { 
      return { zoom: 100 }
    }
}
</script>

<style lang='scss'>
.pdf-viewer-wrapper {
  overflow: hidden;
  max-height: 90vh;
  &.zoom-active {
      cursor: grab;
   }
}
</style>

[jrecly]

Hi guy's,

When I use zealot128 tricks in vuetify, I can drag the pdf document top and bottom but zoom doesn't work properly .....

here the code I use

` <v-btn icon small :disabled="zoom == 100" @click="zoom -= 20">

mdi-magnify-minus-outline

                    </v-btn>
                </v-col>
                <v-col col="1" class="pb-0 pt-0">
                    <v-btn icon small @click='zoom += 20'>
                        <v-icon>mdi-magnify-plus</v-icon>
                    </v-btn>
                </v-col>`

`

            <div class='pdf-viewer-wrapper' v-dragscroll :class='{"zoom-active": zoom > 100 }'>
                <pdf :src="file" :width="zoom + '%'"></pdf>
            </div>

`

If you have another trick or adjustment, it was pretty cool :)

[aminabromand]

@jrecly this should work: <pdf :src="file" :style="'width=' + zoom + '%'"></pdf>