vue实现pdf预览

 

<template>

  <j-modal

    :title="title"

    :width="width"

    :visible="pdfVisible"

    :fullscreen="true"

    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"

    @cancel="handleCancel"

    cancelText="关闭"

  >

    <template slot="footer">

      <div>

        <a-button @click="handleCancel">关闭</a-button>

      </div>

    </template>

   

    <a-spin :spinning="spinning">

      <div style="float:right">

        <button    @click.stop="clock">顺时针 </button>

        <button style="margin-left:10px"  @click.stop="counterClock">逆时针</button>

        <button style="margin-left:10px" :class="{ select: idx == 0 }" @touchstart="idx = 0" @touchend="idx = -1" @click.stop="scaleD">放大</button>

        <button style="margin-left:10px" :class="{ select: idx == 1 }" @touchstart="idx = 1" @touchend="idx = -1" @click.stop="scaleX" >缩小</button>

      </div>

      <div class="pdf">

        <pdf

          ref="pdf"

          v-if="pdfUrl != '' && pdfUrl != null"

          :src="pdfUrl"

          :page="currentPageView"

          :rotate="pageRotate"

          @num-pages="pageCount = $event"

          @page-loaded="currentPageView = $event"

          @loaded="loadPdfHandler"

          @error="pdfError($event)"

          style="display: inline-block; width: 90%"

        >

        </pdf>

        <p v-if="pdfUrl != ''" class="arrow" style="text-align: center">

          <span icon="el-icon-arrow-left" @click="changePdfPage(0)" class="turn" :class="{ grey: currentPageView == 1 }"

            >上一页</span

          >

          {{ currentPageView }} / {{ pageCount }}

          <span

            icon="el-icon-arrow-right"

            @click="changePdfPage(1)"

            class="turn"

            :class="{ grey: currentPageView == pageCount }"

            >下一页</span

          >

     

        </p>

      </div>

    </a-spin>

  </j-modal>

</template>

<script>

import Vue from 'vue'

import { ACCESS_TOKEN } from '@/store/mutation-types'

import { pdfMixin } from '@/mixins/pdfMixin'

import pdf from 'vue-pdf'

export default {

  name: 'PdfPreview',

  mixins: [pdfMixin],

  components: { pdf },

  data() {

    return {

      title: 'PDF预览页面',

      width: 800,

      disableSubmit: false,

      pdfurl: '',

      pdfVisible: false,

      headers: {},

      scale: 100,

      idx: -1,

      pageRotate:0,

    }

  },

  created() {

    const token = Vue.ls.get(ACCESS_TOKEN)

    this.headers = { 'X-Access-Token': token }

  },

  computed: {},

  mounted() {},

  methods: {

    pdfError(error){

      this.$message.error('PDF加载失败，请重试')

      console.error(error)

     

    },

    //顺时针

     clock(){  

      this.pageRotate += 90

    },

    //逆时针

    counterClock(){

      this.pageRotate -= 90

    },

    //放大

    scaleD() {

      this.scale += 5

      this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'

    },

    //缩小

    scaleX() {

      if (this.scale == 100) {

        return

      }

      this.scale += -5

      this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'

    },

    previewFiles(url) {

      this.pdfVisible = true

      this.spinning = true

      this.pdfurl = url

      this.showPdf(url)

    },

    handleCancel() {

      this.close()

    },

    close() {

      this.$emit('close')

      this.pdfVisible = false

    },

  },

}

</script>

<style scoped>

.turn {

  cursor: pointer;

}

</style>

 

 

 

import pdf from "vue-pdf";

export const pdfMixin = {

    components: {

        pdf

    },

    data() {

        return {

            pdfUrl: null,

            currentPageView: 0, // pdf文件页码

            pageCount: 0, // pdf文件总页数

            fileType: "pdf", // 文件类型

            token: '',

            spinning:false,

           

        }

    },

    methods: {

        //展示pdf模板

        showPdf(pUrl) {

           

         

            //var loadingTask = pdf.createLoadingTask('https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-28/1546003237411.pdf', {withCredentials: false});

            this.currentPageView = 1;

            this.pdfUrl = pdf.createLoadingTask({

                url: pUrl,

                cMapUrl: "https://unpkg.com/pdfjs-dist@2.0.943/cmaps/",

                cMapPacked: true,

            });

           

           

        },

       

        //模板分页

        changePdfPage(val) {

            if (val === 0 && this.currentPageView > 1) {

                this.currentPageView--;

            }

            if (val === 1 && this.currentPageView < this.pageCount) {

                this.currentPageView++;

            }

        },

        // pdf加载时

        loadPdfHandler(e) {

            this.currentPageView = 1; // 加载的时候先加载第一页

            this.spinning = false

        },

 

    }

}