zoom
srvarey opened this issue · 5 comments
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
Same issue, too
Any update?
I found out that version 1.9.2 works
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.
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; } }); },