vue中加载pdf文件

vue中加载pdf文件

方案一：

　　直接调用事件即可

?

1 2 3

openPdf {       window.open('/assets/BJBVerse.pdf')   },

方案二：

?

1	npm install vue-pdf --save

<template>

  <div>

    <pdf

      v-for="i in numPages"

      :key="i"

      :src="localSrc"

      :page="i"

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

    ></pdf>

  </div>

</template>

<script>

import pdf from 'vue-pdf'

export default {

  props:{src:String},

  components: {

    pdf

  },

  data() {

    return {

      localSrc: '',

      numPages: undefined,

    }

  },

  mounted() {

    this.localSrc = pdf.createLoadingTask(this.src);

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

      this.numPages = pdf.numPages;

    });

  }

}

</script>

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

import Pdf from './Pdf.vue'       <el-dialog :visible.sync="showBJBCreator" width="50%" height="7%" append-to-body center>       <Pdf src="/assets/BJBCreator.pdf" style="width: 100%; height: 7%" ref="pdf"></Pdf>     </el-dialog>     components: {     Pdf   },     安装elementui main.js里引入   import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css';   Vue.use(ElementUI);

　　

不分页文件代码

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

<template>     <div>         <pdf             v-for="i in numPages"             :key="i"             :src="localSrc"             :page="i"             style="display: inline-block; width: 25%"         ></pdf>     </div> </template>   <script>   import pdf from 'vue-pdf'     export default {   props:{src:String},     components: {         pdf     },     data() {         return {             localSrc: '',             numPages: undefined,         }     },       mounted() {     this.localSrc = pdf.createLoadingTask(this.src);         this.localSrc.promise.then(pdf => {               this.numPages = pdf.numPages;         });     } }   </script>