stellR42 / vue3-pdf-app

Vue 3 PDF viewer based on Mozilla's PDFJS
MIT License
82 stars 28 forks source link

:pageNumber pass through is not working #3

Closed Guru-Zachw closed 1 year ago

Guru-Zachw commented 1 year ago

I am trying to pass in the pageNumber and it is not working. What I expect to happen is that it should start on the first page, if I pass pageNumber=1 into it. But that is not happening. I am having to go clear the cache for it to initially open on page one.

Configuration:

Steps to reproduce the problem:

The code below is my implementation, which is pretty simple, just pass a pdf into the component

What is the expected behavior?

When adding pageNumber as a property I expect it to initially open at that page number

What went wrong?

It is opening at the last opened page number

Attachments (screenshots, links, etc)

<template>
    <div class="window text-center p-3">
        <i class="far fa-times-circle float-right remove" @click="deselect" />
        <VuePdfApp
            class="pdf"
            :pdf="documentUrl"
            pageScale="page-width"
            :pageNumber="pageNumber"
            :config="config"
            @open="wipeHistory"
            >
        </VuePdfApp>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import VuePdfApp from "vue3-pdf-app";

// import this to use default icons for buttons
import "vue3-pdf-app/dist/icons/main.css";

export default defineComponent({
    name: "PDF",
    components: {
        VuePdfApp,
    },
    props: {
        document: {
            type: String,
            required: true,
        },
    },
    data() {
        return {
            /// To make further changes. This document in their github can help.
            /// https://github.com/stellR42/vue3-pdf-app/blob/56c3ab2db9d722fea8c958623a44065c7b9ebdbf/src/utils/toolbar-config.ts
            /// They do have a way to use slots to get portions of the header to be custom.
            /// You can also listen to events that occur from the PDF.
            config: {
                secondaryToolbar: {
                    secondaryOpenFile: false,
                    secondaryViewBookmark: false,
                    spreadNone: false,
                    spreadOdd: false,
                    spreadEven: false,
                },
                toolbar: {
                    toolbarViewerRight: {
                        openFile: false,
                        viewBookmark: false,
                    },
                }
            },
            pageNumber: 1, // This is not actually working, it is how you are supposed to do it though.
        };
    },
    computed: {
        documentUrl() {
            return this.document;
        },
    },
    methods: {
        wipeHistory() {
            /// This is a hack to go around a bug in their code that prevents one from choose an initial page.
            localStorage.setItem('pdfjs.history', '')
        },
        deselect() {
            const company = this.$route.query.company;
            let query;
            if (company) {
                query = { company };
            }
            this.$router.push({
                name: RouteNames.Documents,
                query: query,
            });
        },
    },
    beforeUpdate() {
        this.wipeHistory();
    }
});
</script>

<style lang="scss" scoped>
.window {
    position: relative;
    height: 100%;

    .pdf {
        border: none;
        width: 100%;
        height: 100%;
        background: $lt-gray;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
        margin: auto;

        &.no-preview {
            display: flex;
            background: $dk-gray;

            div {
                margin: auto;
            }
        }
    }

    .remove {
        position: relative;
        top: 10px;
        right: -10px;
        color: darken($orange, 10%);
        background: white;
        border-radius: 100%;
        border: 2px solid $dk-gray;
        z-index: 10000;

        &:hover {
            cursor: pointer;
            color: $orange;
        }
    }

    .no-pdf-viewer {
        background-color: $lt-gray;
        width: 100%;
        height: 100%;
    }
}
</style>
serile commented 1 year ago

I have removed localStorage named 'pdf.history' also to open first page. I think localStorage data has higher priority than page number props.

Guru-Zachw commented 1 year ago

Is the intended action to override the page on start then, to remove the history?