JZTXT

vue中加载pdf文件

发布时间 2023-07-13 17:46:26作者: web与webGL

vue中加载pdf文件

方案一：

　　直接调用事件即可

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

方案二：

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>

　　

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);