vue中加载pdf文件

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

　　

不分页文件代码

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