vue PDF预览——vue-pdf用法

第一步  引入vue-pdf

npm install --save vue-pdf

第二步 页面中使用

<template>

  <div>
    <button @click="open">打开PDF</button>
    <el-dialog title="PDf预览" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <pdf v-for="i in numPages" :key="i" :src="src" :page="i"></pdf>
    </el-dialog>

  </div>

</template>
   
   <script>

import pdf from 'vue-pdf'

var loadingTask = pdf.createLoadingTask('http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf');

export default {

  components: {

    pdf

  },

  data () {

    return {

      src: loadingTask,
      numPages: undefined,
      dialogVisible: true

    }

  },

  mounted () {

    this.src.promise.then(pdf => {

      this.numPages = pdf.numPages;

    });

  },
  methods: {
    //https://blog.csdn.net/2201_75705263/article/details/134383308   vue-pdf使用
    open () {
      let pdfUrl = 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf'
      window.open(pdfUrl, '_blank');
    }
  }

}

   </script>