vue-pdf安装之后,运行报错can not resolve ‘pdfjs-dist/es5/web/pdf_viewer‘

news/2024/7/8 2:10:48 标签: vue-pdf 运行报错, pdf预览, pdf 缩放

 安装方式:

npm i --save vue-pdf

​​​​​​​1. 使用组件:

    <PreViewPdf ref="PreViewPdf"></PreViewPdf>

     this.$refs.PreViewPdf.openPdf(item.oss_url)

 2. 项目抛出如下错误:

通过查阅vue-pdf的github项目的issue发现也有其他人出现这个问题,解决方案是在自己的项目引入pdfjs-dist依赖包,并指定该包的项目固定为2.5.207,即可解决问问题。(详细问题描述)

但个人认为这是vue-pdf的bug,作者应该后期会修复,pdfjs-dist这个包本身也是可以实现pdf预览的,vue-pdf是在此基础上包一层能力,pdfjs的版本依赖应该是在vue-pdf的package.json去修复指定,我们目前的处理方案就是在自己的项目去强行指定版本,如果后期作者修复或者升级这个包,我们自己项目可能需要同步修改一下。

npm i --save pdfjs-dist@2.5.207

组件代码实现如下:

<template>
<div class="pdf" v-show="visible">
    <div class="arrow">
      <span class="xiaoicon icon" @click="visible=false;currentPage=0;pageCount=0">&#xe653;</span>
      <button @click.stop="scaleX">缩小</button>
      <!-- // 上一页 -->
      <span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">上一页</span>
      {{currentPage}} / {{pageCount}}
      <!-- // 下一页 -->
      <span @click="changePdfPage(1)" class="turn" :class="{grey: currentPage==pageCount}">下一页</span>
      <button @click.stop="scaleD">放大</button>
    </div>
    <div class="pdfClass"
          :style="{
        width: scale + '%',
      }">
      <pdf
        ref="wrapper"
        :src="pdfSrc"
        :page="currentPage"
        @num-pages="pageCount=$event"
        @page-loaded="currentPage=$event"
        @loaded="loadPdfHandler" >
      </pdf>
    </div>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
// CMapReaderFactory 解决pdf中文乱码问题
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
export default {
  metaInfo: {   //  这里是给页面修改
    title: '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes' }
    ]
  },
  components: {pdf},
  data () {
    return {
      scale: 100,
      visible: false,
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      pdfSrc: ''    // pdf文件地址
    }
  },
  created() {
    // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
    if(this.pdfSrc){
      this.pdfSrc = pdf.createLoadingTask({url: this.pdfSrc, CMapReaderFactory })
    }
  },
  methods: {
    // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
    changePdfPage (val) {
      // console.log(val)
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--
        console.log(this.currentPage)
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++
        console.log(this.currentPage)
      }
    },
    // pdf加载时
    loadPdfHandler () {
      this.currentPage = 1 // 加载的时候先加载第一页
    },
    openPdf(url){
      this.visible = true
      this.pdfSrc = pdf.createLoadingTask({url: url, CMapReaderFactory })
    },
    //放大
    scaleD() {
      this.scale += 5
    },

    //缩小
    scaleX() {
      if (this.scale == 100) {
        return
      }
      this.scale += -5
    },
  }
}
</script>

<style lang="css" scoped>
.pdf{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  overflow: hidden;
  z-index: 200; 
}
.arrow{
  height: 1.066667rem;
  line-height: 1.066667rem;
  color: #fff;
  text-align: center;
  position: relative;
}
.icon{
  font-size: .32rem;
  color: #fff;
  position: absolute;
  top: 0;
  left: .213333rem;
}
.pdfClass{
  overflow: auto;
}

</style>

 界面运行效果如下:

缩放效果如下:

如上图效果知道,vue-pdf虽然能是达到在线预览的基本效果,但是存在如下不友好问题,影响用户交互效果:

1. pdf画布没有铺满整个页面;

2. 缩放效果不好,只是在整个容器的基础上进行缩放,字体会变形;

3. 而且缩放之后,超出页面的部分不能滚动,显然不满足用户交互需求

 经过查找实践,最后发现pdfh5能达到,满屏和手势缩放的移动端交互效果,实现方式如下。​​​​​​​


http://www.niftyadmin.cn/n/640680.html

相关文章

leetCode 14 Longest Common Prefix

leetcode.windliang.cc/ 第一时间发布 题目描述&#xff08;简单难度&#xff09; 解法一 垂直比较 我们把所有字符串垂直排列&#xff0c;然后一列一列的比较&#xff0c;直到某一个字符串到达结尾或者该列字符不完全相同。 下边看一下我的代码&#xff0c;看起来比较多 //这个…

测试设计之等价类边界值

一、等价类分析定义 等价类划分技术把测试对象的输入域划分成若干部分&#xff0c;然后从每一部分中选取少数有代表性的数据&#xff0c;做为测试用例输入数据的测试用例设计技术&#xff1b;等价类是指测试对象某个参数输入域的子集合。在该子集合中&#xff0c;各个输入数据…

react——利用jszip实现文件批量下载并打包成zip文件

本文章主要记录利用jszip实现文件批量下载图片&#xff0c;文档。mp3&#xff0c;视频&#xff08;MP4)等文件&#xff0c;一般而言前端实现下载功能一般都是通过a链&#xff0c;这在下载单个文件的场景很实用&#xff0c;但如果是批量下载很多个文件&#xff0c;同样也可以用a…

【docker】docker 搭建 mongodb3.6,开启授权访问

首先下载mongodb3.6镜像&#xff1a; docker pull mongo:3.6mongodb通常占用27017端口&#xff0c;最简单的启动方式如下&#xff1a; docker run --name mongodb -p 27017:27017 -d mongo:3.6不过通常情况下&#xff0c;我们不会直接这样启动。我们需要绑定数据卷&#xff0c;…

window10上配置Ant环境变量

一、下载ANT安装包 下载地址&#xff1a;http://ant.apache.org/bindownload.cgi 百度网盘下载链接&#xff1a;https://pan.baidu.com/s/1-Fgw2lU3nQKsUktSCVar7A 提取码&#xff1a;2ynr 二、配置环境变量 步骤1、选中【此电脑】右键-【属性】-【高级系统设置】&#xff0…

鼠标悬停显示禁用图标

cursor:not-allowed;//是禁用的样式 一个圆圈中间一个斜杠 //其中还有一个属性也是这个样式 cursor:no-drop;

CSS圆角

border-radius 此CSS属性用于做圆角 box-shadow 此CSS属性用于做阴影效果 文章链接http://www.cnblogs.com/lianjun/archive/2011/03/11/1981606.html转载于:https://www.cnblogs.com/manyiString/archive/2012/10/18/2729396.html

eslint用于忽略部分代码的校验的4种注释语句

01.关闭段落校验 /* eslint-disable */some code some code /* eslint-enable */02.关闭当前行校验 some code // eslint-disable-line03.关闭下一行校验 // eslint-disable-next-line some code04.关闭整个文件校验 /* eslint-disable */