vue-pdf组件

最新推荐文章于 2025-04-16 09:58:02 发布

乾卦三爻

最新推荐文章于 2025-04-16 09:58:02 发布

阅读量626

点赞数

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

本文链接：https://blog.youkuaiyun.com/weixin_46325225/article/details/127356904

版权

本文介绍如何在Vue.js应用中集成pdf.js库，创建一个vue-pdf组件，实现PDF文件的在线预览功能。内容包括安装依赖、导入pdf.js、编写组件模板和样式，以及处理PDF加载和页面导航。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<template>
  <div id="pdf" class="pdf">
    <div class="title">
      <div>PDF阅读器</div>
      <div>{
   {
   currentPage||0}}/{
   {
   pageCount||0}}</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"><

最低0.47元/天解锁文章