vue实现pdf预览实现点击按钮上一页下一页

admin管理员组

文章数量:1633183

1.安装pdfjsLib

npm i pdfjsLib --save

2.html

<template>
    <div class="product">
        <div class="product__wrapper">
            <div class="product__content">
                <div class="product__controlBar" >
                    <el-button
                        type="primary"
                        icon="el-icon-caret-left"
                        round
                        class="product__controlBar--operation"
                        @click="previousPage"
                        >上一页</el-button
                    >
                    <el-button
                        type="primary"
                        round
                        class="product__controlBar--operation"
                        @click="nextPage"
                        >下一页<i class="el-icon-caret-right"></i
                    ></el-button>
                </div>
                <div class="product__content--data" ref="canvasWrapper">
                    <canvas
                        ref="pdfCanvas"
                        class="pdf-canvas"
                        style="
                            width: 100%;
                            height: 95%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        "
                    ></canvas>
                </div>
            </div>
        </div>
    </div>
</template>

3.js

export default {
    data() {
        return {
            pdfUrl: "", //接口返回的文件路径
            totalPages: 0,
            currentPage: 1,
            pdfDoc: null,
        };
    },
    mounted() {
        //请求接口 
        this.getData()
    },
    method: {
        getData() {
            //this.pdfUrl = '接口返回的文件路径'
            this.renderPdf();
        },
        async renderPdf() {
            console.log(this.pdfUrl);
            const loadingTask = pdfjsLib.getDocument(this.pdfUrl);
            this.pdfDoc = await loadingTask.promise;
            this.totalPages = this.pdfDoc.numPages;
            this.renderPage(this.currentPage);
        },
        async renderPage(pageNumber) {
            const page = await this.pdfDoc.getPage(pageNumber);
            const viewport = page.getViewport({ scale: 1 });
            const canvas = this.$refs.pdfCanvas;
            const context = canvas.getContext('2d');

            const wrapper = this.$refs.canvasWrapper;
            const wrapperWidth = wrapper.clientWidth;
            const wrapperHeight = wrapper.clientHeight ; // 在原有高度上再增加额外的高度

            const scaleWidth = wrapperWidth / viewport.width;
            const scaleHeight = wrapperHeight / viewport.height;

            const scale = Math.min(scaleWidth, scaleHeight);

            canvas.width = viewport.width * scale;
            canvas.height = viewport.height * scale;

            const scaledViewport = page.getViewport({ scale });

            const renderContext = {
                canvasContext: context,
                viewport: scaledViewport,
            };

            await page.render(renderContext).promise;
        },
    }
}

本文标签： 下一页上一页按钮vuePDF