vue2 多页面pdf预览

最新推荐文章于 2025-10-21 20:08:17 发布

原创

最新推荐文章于 2025-10-21 20:08:17 发布 · 995 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#pdf #vue.js #javascript

使用pdfjs-dist预览pdf，实现预加载，滚动条翻页。pdfjs的版本很重要，换了好多版本，终于有一个能用的

node 20.18.1
"pdfjs-dist": "^2.2.228",

vue页面代码如下

<template>
  <div v-loading="loading">
    <div class="fixed-toolbar">
      <div class="flex flex-direction">
        <div class="mb4">
          <el-button @click="onClose()" size="mini"
            type="warning">返&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;回</el-button>
        </div>
        <div class="mb4">
          <el-button @click="switchViewMode()" size="mini" type="success">切换模式</el-button>
        </div>
        <div class="mb4">
          <el-button @click="scalBig()" size="mini"
            type="primary">放&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;大</el-button>
        </div>
        <!-- <div>
          <el-button class="mb4" @click="renderPdf(1)" size="mini" type="primary">默认</el-button>
        </div> -->
        <div>
          <el-button @click="scalSmall()" size="mini"
            type="primary">缩&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;小</el-button>
        </div>
        <el-dropdown size="mini" trigger="click" class="more-dropdown" style="line-height: 35px;">
          <el-button size="mini" type="primary">缩&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;放</el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><span class="el-button--text-" @click="scale = 1">1X</span></el-dropdown-item>
            <el-dropdown-item><span class="el-button--text-" @click="scale = 2">2X</span></el-dropdown-item>
            <el-dropdown-item><span class="el-button--text-" @click="scale = 3">3X</span></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <!-- PDF容器 -->
    <div ref="pdfContainer" class="pdf-contai

最低0.47元/天解锁文章