使用vue-pdf插件加载pdf

这篇具有很好参考价值的文章主要介绍了使用vue-pdf插件加载pdf。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

安装:

// 安装这个版本,其它版本会有千奇百怪的错,这个版本和4.0.0都是可以的
cnpm install vue-pdf@4.2.0

// 安装pdfjs-dist
cnpm install pdfjs-dist@2.5.207

使用:

// 我的css样式是pxToRem,友友们使用可能样式会有所差距,自行调
<template>
  <div id="container">
    <!-- 上一页、下一页 -->
    <div class="right-btn">
      <!-- 输入页码 -->
      <div class="pageNum">
        <input v-model.number="currentPage"
          type="number"
          class="inputNumber"
          @input="inputEvent()">
      </div>
      <div @click="changePdfPage('first')"
        class="turn">
        首页
      </div>
    <!-- 在按钮不符合条件时禁用 -->
      <div @click="changePdfPage('pre')"
        class="turn-btn"
        :style="currentPage===1?'cursor: not-allowed;':''">
        上一页
      </div>
      <div @click="changePdfPage('next')"
        class="turn-btn"
        :style="currentPage===pageCount?'cursor: not-allowed;':''">
        下一页
      </div>
      <div @click="changePdfPage('last')"
        class="turn">
        尾页
      </div>
    </div>

    <div class="pdfArea">
      <pdf :src="src"
        ref="pdf"
        @loaded="loadPdfHandler"
        v-show="loadedRatio===1"
        :page="currentPage"
        @num-pages="pageCount=$event"
        @progress="loadedRatio = $event"
        @page-loaded="currentPage=$event"
        @link-clicked="currentPage = $event"
        style="display: inline-block;width:100%"
        id="pdfID">
      </pdf>
    </div>
    <!-- 加载未完成时,展示进度条组件并计算进度 -->
    <div class="progress"
      v-show="loadedRatio!==1">
      <el-progress type="circle"
        :width="70"
        color="#53a7ff"
        :percentage="Math.floor(loadedRatio * 100)">
      </el-progress>
      <br>
      <!-- 加载提示语 -->
      <span>{{remindShow}}</span>
    </div>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  name: 'pdf-view',
  components: {
    pdf
  },
  data () {
    return {
      // ----- loading -----
      remindText: {
        loading: '加载文件中,文件较大请耐心等待...',
        refresh: '若卡住不动,可刷新页面重新加载...'
      },
      remindShow: '加载文件中,文件较大请耐心等待...',
      intervalID: '',
      // ----- vuepdf -----
      // src静态路径: /static/xxx.pdf
      // src服务器路径: 'http://.../xxx.pdf'
      src: 'https://sever.superzou.vip/o5CFL5N8kXpGFK746DlnU4Bb5z2R92MN/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20231017163845.pdf',
      // 当前页数
      currentPage: 0,
      // 总页数
      pageCount: 0,
      // 加载进度
      loadedRatio: 0
    }
  },
  created () {
    this.prohibit()
  },
  destroyed () {
    // 在页面销毁时记得清空 setInterval
    clearInterval(this.intervalID)
  },
  mounted () {
    // 更改 loading 文字
    const _that = this
    this.intervalID = setInterval(() => {
      _that.remindShow === _that.remindText.refresh
        ? _that.remindShow = _that.remindText.loading
        : _that.remindShow = _that.remindText.refresh
    }, 4000)
    // 监听滚动条事件
    this.listenerFunction()
  },
  methods: {
    // 监听滚动条事件
    listenerFunction (e) {
      document.getElementById('container').addEventListener('scroll', () => {}, true)
    },
    // 页面回到顶部
    toTop () {
      document.getElementById('container').scrollTop = 0
    },
    // 输入页码时校验
    inputEvent () {
      if (this.currentPage > this.pageCount) {
        // 1. 大于max
        this.currentPage = this.pageCount
      } else if (this.currentPage < 1) {
        // 2. 小于min
        this.currentPage = 1
      }
    },
    // 切换页数
    changePdfPage (val) {
      if (val === 'pre' && this.currentPage > 1) {
        // 切换后页面回到顶部
        this.currentPage--
        this.toTop()
      } else if (val === 'next' && this.currentPage < this.pageCount) {
        this.currentPage++
        this.toTop()
      } else if (val === 'first') {
        this.currentPage = 1
        this.toTop()
      } else if (val === 'last' && this.currentPage < this.pageCount) {
        this.currentPage = this.pageCount
        this.toTop()
      }
    },

    // pdf加载时
    async loadPdfHandler (e) {
      // 加载的时候先加载第一页
      this.currentPage = 1
    },
    // 禁用鼠标右击、F12 来禁止打印和打开调试工具
    prohibit () {
      // console.log(document)
      document.oncontextmenu = function () {
        return false
      }
      document.onkeydown = function (e) {
        if (e.ctrlKey && (e.keyCode === 65 || e.keyCode === 67 || e.keyCode === 73 || e.keyCode === 74 || e.keyCode === 80 || e.keyCode === 83 || e.keyCode === 85 || e.keyCode === 86 || e.keyCode === 117)) {
          return false
        }
        if (e.keyCode === 18 || e.keyCode === 123) {
          return false
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#container {
  overflow: auto;
  height: 800px;
  font-family: PingFang SC;
  width: 100%;
  display: flex;
  /* justify-content: center; */
  position: relative;
}

/* 右侧功能按钮区 */
.right-btn {
  position: fixed;
  right: 5%;
  bottom: 20%;
  width: 60px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  z-index: 99;
}

.pdfArea {
  width: 80%;
}

/* ------------------- 输入页码 ------------------- */
.pageNum {
  margin: 10px 0;
  font-size: 7px;
}
/*在谷歌下移除input[number]的上下箭头*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}
/*在firefox下移除input[number]的上下箭头*/
input[type='number'] {
  -moz-appearance: textfield;
}

.inputNumber {
  border-radius: 8px;
  border: 1px solid #999999;
  height: 16px;
  font-size: 7px;
  width: 60px;
  text-align: center;
}
.inputNumber:focus {
  border: 1px solid #00aeff;
  background-color: rgba(18, 163, 230, 0.096);
  outline: none;
  transition: 0.2s;
}

/* ------------------- 切换页码 ------------------- */
.turn {
  background-color: #888888;
  opacity: 0.7;
  color: #ffffff;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 0;
  font-size: 7px;
}

.turn-btn {
  background-color: #000000;
  opacity: 0.6;
  color: #ffffff;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  margin: 2px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
}

.turn-btn:hover,
.turn:hover {
  transition: 0.3s;
  opacity: 0.5;
  cursor: pointer;
}

/* ------------------- 进度条 ------------------- */
.progress {
  position: absolute;
  right: 50%;
  top: 50%;
  text-align: center;
}
.progress > span {
  color: #199edb;
  font-size: 14px;
}
</style>

报错: 

这样执行会报一个catch的错误,然后找到node_modules下面的vue-pdf目录src文件下面的pdfjsWrapper.js文件中,第197行的catch注释掉就好。

使用vue-pdf插件加载pdf,vue.js,pdf,前端文章来源地址https://www.toymoban.com/news/detail-802192.html

到了这里,关于使用vue-pdf插件加载pdf的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue前端预览pdf并加水印、ofd文件,控制打印、下载、另存,vue-pdf的使用方法以及在开发中所踩过的坑合集

    根据公司的实际项目需求,要求实现对pdf和ofd文件的预览,并且需要限制用户是否可以下载、打印、另存pdf、ofd文件,如果该用户可以打印、下载需要控制每个用户的下载次数以及可打印的次数。正常的预览pdf很简单,直接调用浏览器的预览就可以而且功能也比较全,但是一

    2024年02月16日
    浏览(172)
  • Vue中 引入使用 patch-package 为依赖打补丁 (以修改 vue-pdf 打包后 [hash].worker.js 路径问题为例)

    1. patch-package 简介 patch-package npm地址 patch-package github文档 如果不需要在生产中运行 npm (如:正在制作 web 前端,则可使用 --save dev) 1.2 使用方法 制作修补程序 首先更改 node_modules 文件夹中特定包的文件,然后运行 或使用 npx (npm 5.2) package-name 与所更改的程序包的名称相匹配

    2024年02月10日
    浏览(46)
  • vue中如何使用vue-pdf及相应报错解决

      目录 一、安装npm 依赖 二、引入组件 1、html中使用组件 单页 多页  2、数据处理 单页 多页  三、项目使用--代码部分 四、报错解决 前言 使用vue-pdf组件实现文件预览功能 并在文件上增加操作按钮 vue3不支持vue-pdf,vue3项目用pdfjs-dist   1、在根目录下输入一下命令 2、修改

    2023年04月12日
    浏览(36)
  • vue3项目使用pdf.js插件实现:搜索高亮、修改pdf.js显示的页码、向pdf.js传值、控制搜索、处理接口文件流

    官网地址:http://mozilla.github.io/pdf.js/ 中文文档地址:https://gitcode.gitcode.host/docs-cn/pdf.js-docs-cn/print.html PDF.js是基于HTML5技术构建的,用于展示可移植文档格式的文件(PDF),它可以在现代浏览器中使用且无需安装任何第三方插件。 pdf.js主要包含两个库文件 pdf.js:负责API解析 pdf.wor

    2024年02月13日
    浏览(67)
  • vue-pdf 单列显示多个pdf页面

    注意:文件要放在public文件夹下,不然会报错:如果文件放在远程服务器上,则直接写远程地址 Warning: Ignoring invalid character \\\"33\\\" in hex string\\\' 原因:读取 PDF 文件时,路径不合法,导致读取不到文件; 在 vue-cli3 脚手架搭建的项目中,读取本地的 PDF 文件需要放到 public 文件夹中

    2024年02月15日
    浏览(49)
  • vue-pdf实现pdf文件在线预览

    在日常的工作中在线预览 PDF 文件的需求是很多的,下面介绍一下使用 vue-pdf 实现pdf文件在线预览 使用 npm 安装 vue-pdf npm install vue-pdf 使用 vue-pdf 显示 PDF 文件 此时页面中就会显示我们提供的 PDF 文件了,但是此时只显示了 PDF 文件的第一页 按页显示 PDF 文件 使用 vue-pdf 能满足

    2024年02月13日
    浏览(46)
  • Vue-pdf踩坑记录

    最近在公司的一个项目中,需要在线预览PDF文件。基于vue-admin-electron的模板中开发。开发机系统为Windows,使用的框架为electron-vue。 坑1:在通过vue-router路由到含有vue-pdf组件的页面时报:“syntaxError: Unexpected token ” 错误。 解决方法: 将vue-pdf添加到webpack配置文件的白名单中。

    2024年02月11日
    浏览(42)
  • Module not found: Error: Can‘t resolve ‘vue-pdf‘ in ‘xxx‘

    使用命令npm run serve时vue项目报错: Module not found: Error: Can\\\'t resolve \\\'vue-pdf\\\' in \\\'xxx\\\'  解决方案: 运行命令 : 即可解决。 再次顺利执行npm run serve

    2024年02月11日
    浏览(47)
  • vue-pdf多页预览异常,Rendering cancelled, page 1 Error at BaseExceptionClosure xxx

    项目开发使用vue-pdf,单页情况预览正常,多页vue-pdf预览异常,第一次预览时,会先弹出异常模态窗口,关闭模态窗口,pdf又是正常显示,报错信息及异常截图如下: 异常截图,点击右上角关闭X,pdf是正常预览,再次打开后也能正常预览,仅第一次打开预览有异常。 1.vue-pdf预

    2024年02月07日
    浏览(41)
  • 前端(vue)js在线预览PDF、Word、Excel、ppt等office文件

    可选参数 pdf=true,word文档尝试以pdf方式显示,默认false watermark=水印文本,显示文本水印;“img:”+图片url表示图片水印,如:img:https://view.xdocin.com/demo/wm.png saveable=true,是否允许保存源文件,默认false printable=false,是否允许打印,默认true ©able=false,是否允许选择复制内容,

    2024年02月13日
    浏览(70)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包