vue2.0借用vue-pdf实现在线预览pdf文件

admin管理员组

文章数量:1649172

在需求中，经常遇见pdf的在线预览效果
实现原理：借用依赖vue-pdf
vue-pdf推荐网址：https://www.npmjs/package/vue-pdf

实现效果

pdf文件样式

实现步骤

一：安装依赖

npm i --save vue-pdf

二：页面使用

vue文件中

<template>
  <div class="read">
    <van-nav-bar
      title="预览"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="pdf" v-show="fileType === 'pdf'">
      <p class="arrow" style="text-align:center">
        <!-- // 上一页 -->
        <van-tag color="#7232dd" plain @click="changePdfPage(0)">上一页</van-tag>
        {{currentPage}} / {{pageCount}}
        <!-- // 下一页 -->
        <van-tag color="#7232dd" @click="changePdfPage(1)">下一页</van-tag>
      </p>
      <!--
      自己引入就可以使用,这里我的需求是做了分页功能,如果不需要分页功能,只要src就可以了
      src：需要展示的PDF地址
      currentPage：当前展示的PDF页码
      PDF文件总页码
      一开始加载的页面
      loadPdfHandler：加载事件
      -->
      <pdf
        :src="src"  
        :page="currentPage" 
        @num-pages="pageCount=$event" 
        @page-loaded="currentPage=$event" 
        @loaded="loadPdfHandler">
      </pdf>
    </div>
  </div>
</template>

js文件中

// 引入组件
import pdf from 'vue-pdf'
// 引入文件
import pdfUrl from './example.pdf'
export default {
  components: {
    pdf
  },
  data () {
    return {
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      fileType: 'pdf', // 文件类型
      src: pdfUrl, // pdf文件地址
    }
  },
  created () {
   // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
　　　this.src = pdf.createLoadingTask(this.src)
  },
   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 (e) {
        this.currentPage = 1 // 加载的时候先加载第一页
      }
  }
}

三：可能问题

问题原因

缺少解析pdf所需loader

问题解决

1:下载依赖

file-loader：file-loader可以用来帮助webpack打包处理一系列的文件；比如：.png 、 .jpg 、.jepg等格式的图片，pdf格式的文件等等

npm install --save-dev file-loader
or
cnpm install --save-dev file-loader

2:配置vue.config.js文件

module.exports = {
	// webpack配置
	chainWebpack: config => { 
	  config.module
	  .rule('pdf')
	  .test(/\.pdf$/)
	  .use('file')
	    .loader('file-loader')
	    .end();
	}
}

本文标签： 在线文件vuePDF