vue-pdf组件实例

最新推荐文章于 2024-10-16 18:11:03 发布

乾卦三爻

最新推荐文章于 2024-10-16 18:11:03 发布

阅读量814

点赞数

分类专栏： vue pdf vue-pdf 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_46325225/article/details/127238696

版权

本文将介绍如何在Vue.js应用中集成vue-pdf组件，实现PDF文件的在线预览功能。通过引入vue-pdf库，可以轻松地将PDF文档嵌入到网页中，为用户提供便捷的查看体验。

摘要由CSDN通过智能技术生成

<template>
    <div id="container">
        <div class="title">
            <div>PDF阅读器</div>
            <div>{
   {
   currentPage}}/{
   {
   pageCount}}</div>
            <div>
                <!-- 上一页、下一页 -->
                <div class="right-btn">
                    <!-- 输入页码 -->
                    <!-- <div class="pageNum">
                    <input v-model.number="currentPage"
                            type="number"
                            class="inputNumber"
                            @input="inputEvent()"> / {
   {
   pageCount}}
                    </div> -->
                    <div @click="changePdfPage('first')"
                        class="turn">
                    首页
                    </div>
                    <!-- 在按钮不符合条件时禁用 -->
                    <div @click="changePdfPage('pre')"
                        class="turn-btn"
                        :style="currentPage===1?'cursor: not-allowed;color:#999;':''">
                    上一页
                    </div>
                    <div @click="changePdfPage('next')"
                        class="turn-btn"
                        :style="currentPage===pageCount?'cursor: not-allowed;color:#999;':''">
                    下一页
                    </div>
                    <div @click="changePdfPage('last')"
                        class="turn">
                    尾页
                    </div>
                </div>
            </div>
        </div>
      <div class="pdfArea">
        <pdf :src="src"
             ref="pdf"
             v-show="loadedRatio===1"
             :page="currentPage"
             @num-pages="pageCount=$event"
             @progress="loadedRatio = $event"
             @page-loaded="currentPage=$event"
             @loaded="loadPdfHandler"
             @link-clicked="currentPage = $event"
             style="display: inline-block;width:100%"
             id="pdfID"><