pdf.js插件的基本使用

1.pdf.js插件的使用(vue2版)

实际效果

先去官网下载pdf.js插件官网:https://github.com/mozilla/pdf.js/

下载之后包含这三个文件

把下载的pdf文件放到同一级

代码演示

about.vue

<template>
	<div class="content">
		<input type="file" ref="input" @change='change'>
          <!-- hot表示域名 file表示文件的地址 -->
          比如:http:localhost:8080/#/about/pdf/web/viewer.html?file=文件地址"
          而且要与浏览器后台network中的viewer.html这个文件的url保持一样
		<iframe style="width:600px;height:500px"
		:src="hot+'/pdf/web/viewer.html?file='+pdf">
		</iframe>
	</div>
</template>
<script>
// import './pdf/web/viewer'
export default {
   data() {
	  return {
		pdf:'',
		hot:''
	  }
   },
   computed:{
   },
   methods:{
	   change(val) {
	   		let pdf = URL.createObjectURL(val.target.files[0])
			this.pdf = pdf
			this.hot = window.location.origin
           
           // 如果这个文件是后台给你的话,让他给你一个blob对象或者base64字符串，使用URL.createObjectURL()方法将blob转成文件地址,base64转blob
           
   },
}
</script>
<style lang="scss" scoped>

</style>

注意pdf.js只能预览pdf文件

补充小知识

<!-- src可以识别pdf的base64字符可以进行预览，
也可以识别word、Excel文件的base64字符但是不支持预览只支持下载 -->
注意:每个浏览器都有自带的pdf识别功能，
所以每个浏览器的pdf功能以及页面样式不一样，
开发中为了统一功能以及页面样式，那就需要使用一个pdf插件统一规范起来
<iframe src='base64'></iframe>