zoom

[srvarey]

The scale / zoom in / zoom out doesn't seem to work (has no effect)
Can you provide code to show how I can handle scaling
Thanks

[tiendatleo]

Same issue, too

[abishek-trainn]

Any update?

[megabild]

I found out that version 1.9.2 works

[ewchow]

Since I went on this wild goose chase, thought I'd leave this for whomever else finds themselves here.

In v1.10.0 (the current version on npm), it uses pdfjs-dist v2.14.305 and it has an updated call signature for the update function in the PDFPageView class. It now accepts an object instead of positional arguments. pdfvuer calls PDFPageView.update using positional arguments.

In versions <=v1.9.2 and >=v2.0.0, pdfjs-dist was downgraded to v2.5.207, which has the positional arguments call signature instead of an object call signature like v2.14.305.

pdfvuer >=v2.0.0 seem to be built for Vue 3. I'm using Vue 2 and wanted to stick with v1.10.0 for the newer pdfjs-dist version, so I got around the bug using patch-package for the short term (if you don't already use it, it's great). I've also opened a PR.

[Tayyab-Abbas]

I have fixed this issue, and customarily handle the zoom-in and zoom-out flow, Here is the Available code in chunks that works with Vue.js,
This code directly hit the style for dom classes to change the style customizable.
If someone got any issue can contact me via email at "tayyababbaxi661@gmail.com".
Thank you.
Regard: Tayyab Abbas (Vue js and laravel developer)

//template code is: <div v-if="showPdfConrols" class="row pdf-bottom-button-container" > <div class="pdf-bottom-button"> <div id="buttons" class="pdf-buttons"> <span class="ui active item"> <input class="pdf-page-controller" v-model.trim.lazy="currentPageInput" @change="changePdfActivePage" type="text" /> / {{ totalPdfPages ? totalPdfPages : "∞" }} <span class="m-2">|</span> <a v-if="zoomLevel > minZoomLevel" class="zoom-out" @click="zoomOut" > <MinusCircle class="svg-arrow-icons-white" /> </a> <span class="pdf-zoom-controller" >{{ zoomLevel }} %</span > <a v-if="zoomLevel < maxZoomLevel" class="zoom-in" @click="zoomIn" > <PlusCircle class="svg-arrow-icons-white" /> </a> </span> </div> </div> </div> <pdfvuer :src="ebookApi.data.ebook.pdf" :page="currentPageNumber" :scale="pdfScale" :resize="false" @loading="pdfLoading" @numpages="getPdfPagesCount" @pagerendered="pdfRendered" @update:scale="scaleHandler($event)" @contextmenu.native="handler($event)" > <template slot="loading"> <div class="d-flex justify-content-center align-items-center h-100" > <div class="logo-loader"> <lottie-logo-loader class="logo-loader-opacity py-4" path="anims/hw-loader.json" :width="180" :height="180" /> </div> </div> </template> </pdfvuer> // data variables are: data() { return { ebookApi: getApiState(), currentPageNumber: 1, totalPdfPages: null, pdfScale: 1.0, showPdfConrols: false, currentPageInput: "1", zoomLevel: 100, maxZoomLevel: 125, minZoomLevel: 75, zoomValue: 0, }; }, //methods are: setDefaultZoom() { this.zoomLevel = 100; this.zoomValue = 0; this.updatePdfStyle(); }, zoomIn() { this.zoomLevel += 1; this.zoomValue = 10; this.updatePdfStyle(); }, zoomOut() { this.zoomLevel -= 1; this.zoomValue = -10; this.updatePdfStyle(); }, updatePdfStyle() { this.zoomHandeler(".page", this.zoomValue); this.zoomHandeler(".canvasWrapper", this.zoomValue); this.zoomHandeler("canvas", this.zoomValue); this.zoomHandeler(".textLayer", this.zoomValue); this.scrollHandeler(); }, zoomHandeler(className, zoomPixels) { const element = document.querySelectorAll(className); element.forEach((element) => { const originalWidth = parseInt(element.style.width); const originalHeight = parseInt(element.style.height); if (!isNaN(originalWidth) && !isNaN(originalHeight)) { element.style.width = ${originalWidth + zoomPixels}px; element.style.height = ${originalHeight + zoomPixels}px; } }); },