vue项目中实现预览pdf

vue项目中实现预览pdf

1. iframe

<iframe :src="pdfSrc"></iframe>
?
 data() {
 ? ?return {
 ? ? ?pdfSrc: 'http://192.168.0.254:19000/trend/2023/12/27/5635529375174c7798b5fabc22cbec45.pdf',
 ?  }
  },
 ? ? ?
?
 ?iframe {
 ? ?width: 100%;
 ? ?height: calc(100vh - 132px - 2 * 20px - 160px);
  }

2. vue-pdf

npm i vue-pdf --save-dev

<!--
 * @Description: vue-pdf使用
 * @Author: mhf
 * @Date: 2023-12-28 11:37:30
-->
<template>
 ?<div class="systemDescription">
 ? ?<div class="systemDescription-header">vue-pdf使用</div>
?
 ? ?<lineH style="margin: 20px 0"/>
?
 ? ?<div class="systemDescription-pdf">
 ? ? ?<pdf
 ? ? ? ? ? v-for="i in numPages"
 ? ? ? ? ? :key="i"
 ? ? ? ? ? :src="pdfSrc"
 ? ? ? ? ? :page="i"
 ? ? ?></pdf>
 ? ?</div>
 ?</div>
</template>
?
<script>
import pdf from 'vue-pdf'
?
export default {
 ?name: 'systemDescription',
 ?components: { pdf },
 ?props: {},
 ?data() {
 ? ?return {
 ? ? ?pdfSrc:
 ? ? ? ?'http://192.168.0.254:19000/trend/2023/12/27/5635529375174c7798b5fabc22cbec45.pdf',
 ? ? ?numPages: undefined,
 ?  }
  },
 ?methods: {},
 ?created() {
  },
 ?mounted() {
 ? ?let src = pdf.createLoadingTask(this.pdfSrc);
 ? ?src.promise.then(pdf => {
 ? ? ?this.numPages = pdf.numPages; // 解决vue-pdf默认只展示第一页的问题
 ?  });
  }
}
</script>
?
<style lang="scss" scoped>
.systemDescription {
 ?padding: 50px 30px 40px;
?
 ?&-header {
 ? ?font-size: 26px;
 ? ?font-family: Source Han Sans CN;
 ? ?font-weight: 700;
 ? ?color: #333;
 ? ?text-align: center;
  }
?
 ?&-pdf {
 ? ?margin: 0 0 0 -24px;
 ? ?width: calc(100% + 50px);
 ? ?height: calc(100vh - 132px - 2 * 20px - 180px);
 ? ?overflow-y: auto;
  }
}
</style>

参考：解决vue-pdf默认只展示第一页的问题

使用vue-pdf展示静态PDF文件的时候（在线PDF可使用embed标签查看），常规操作之后发现只能加载第一页PDF，以下是解决方案：
?
vue-pdf使用过程如下：
?
$ yarn add vue-pdf
or
$ npm install vue-pdf
?
?
在组件中使用：
<template>
 ?<pdf src=""></pdf>
</template>
<script>
 ?import pdf from 'vue-pdf'
 ?exprot default {
 ? ?component: {
 ? ? ?pdf
 ?  }
  }
</script>
?
这个时候，多页的PDF只会显示第一页，这时各位可以去查看一下vue-pdf的源码，我们可以发现，它的实现过程是将PDF按页绘制在canvas上的，其页码数oage默认值是1，展示第一页的canvas。所以我们主要使用两种方式处理。
?
第一种是使用v-for循环加载所有页面：
<template>
 ?<pdf src=""></pdf>
</template>
<script>
 ?import pdf from 'vue-pdf'
 ?exprot default {
 ? ?component: {
 ? ? ?pdf
 ?  }
  }
</script>
这个时候，多页的PDF只会显示第一页，这时各位可以去查看一下vue-pdf的源码，我们可以发现，它的实现过程是将PDF按页绘制在canvas上的，其页码数oage默认值是1，展示第一页的canvas。所以我们主要使用两种方式处理。
?
第一种是使用v-for循环加载所有页面：
?
<template>
 ? ?<div>
 ? ? ? ?<pdf
 ? ? ? ? ? ?v-for="i in numPages"
 ? ? ? ? ?  :key="i"
 ? ? ? ? ?  :src="src"
 ? ? ? ? ?  :page="i"
 ? ? ? ? ? ?style="display: inline-block; width: 25%"
 ? ? ? ?></pdf>
 ? ?</div>
</template>
 
<script>
 
import pdf from 'vue-pdf'
 
var loadingTask = pdf.createLoadingTask('https://cdn.mozilla.net/pdfjs/tracemonkey.pdf');
 
export default {
 ? ?components: {
 ? ? ? ?pdf
 ?  },
 ? ?data() {
 ? ? ? ?return {
 ? ? ? ? ? ?src: loadingTask,
 ? ? ? ? ? ?numPages: undefined,
 ? ? ?  }
 ?  },
 ? ?mounted() {
 
 ? ? ? ?this.src.promise.then(pdf => {
 
 ? ? ? ? ? ?this.numPages = pdf.numPages;
 ? ? ?  });
 ?  }
}
 
</script>
这样有一个问题就是如果页数非常多，加载会很慢。
?
第二张是采用分页的形式：
<template>
 ?<div class="onlineHelp cg-box">
 ? ?<div class="tools">
 ? ? ? ?<div class="page">第 {{pageNum}} /{{pageTotalNum}}页 </div>
 ? ? ? ?<el-input v-model.number="goPageNum" style="width: 70px;margin-right: 8px"></el-input>
 ? ? ? ?<el-button type="success" @click.stop="goPage"> 前往</el-button>
 ? ? ? ?<el-button type="primary" @click.stop="prePage"> 上一页</el-button>
 ? ? ? ?<el-button type="primary" @click.stop="nextPage"> 下一页</el-button>
 ? ? ?</div>
 ? ? ?<div class="pdf-box">
 ? ? ? ?<pdf ref="pdf"
 ? ? ? ?  :src="url"
 ? ? ? ?  :page="pageNum"
 ? ? ? ? ?@progress="loadedRatio = $event"
 ? ? ? ? ?@page-loaded="pageLoaded($event)"
 ? ? ? ? ?@num-pages="pageTotalNum=$event"
 ? ? ? ? ?@error="pdfError($event)"
 ? ? ? ? ?@link-clicked="page = $event">
 ? ? ? ?</pdf>
 ? ? ?</div>
 ?</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
 ?name: 'onlineHelp',
 ?components: {
 ? ?pdf
  },
 ?data() {
 ? ?return {
 ? ? ?url: `${process.env.VUE_APP_BASEURL}/help.pdf`,
 ? ? ?pageNum: 1,
 ? ? ?pageTotalNum: 1,
 ? ? ?// 加载进度
 ? ? ?loadedRatio: 0,
 ? ? ?curPageNum: 0,
 ? ? ?goPageNum: 1
 ?  };
  },
 ?methods: {
 ? ?// 上一页函数，
 ? ?prePage() {
 ? ? ?var page = this.pageNum
 ? ? ?page = page > 1 ? page - 1 : this.pageTotalNum
 ? ? ?this.pageNum = page
 ?  },
 ? ?// 下一页函数
 ? ?nextPage() {
 ? ? ?var page = this.pageNum
 ? ? ?page = page < this.pageTotalNum ? page + 1 : 1
 ? ? ?this.pageNum = page
 ?  },
 ? ?// 前往页数
 ? ?goPage() {
 ? ? ?if(!this.goPageNum || /\D/.test(this.goPageNum) || this.goPageNum < 1 || this.goPageNum > this.pageTotalNum) {
 ? ? ? ?this.$message.warning('输入页码有误')
 ? ? ? ?return
 ? ?  }
 ? ? ?this.pageNum = this.goPageNum
 ?  },
 ? ?// 页面加载回调函数，其中e为当前页数
 ? ?pageLoaded(e) {
 ? ? ?this.curPageNum = e
 ?  },
 ? ?// 其他的一些回调函数。
 ? ?pdfError(error) {
 ? ? ?console.error(error)
 ?  }
  }
};
</script>
?
<style lang="scss">
.onlineHelp {
 ?height: 100%;
 ?position: relative;
 ?display: flex;
 ?justify-content: center;
  .tools {
 ? ?position: absolute;
 ? ?top: 10px;
 ? ?right: 10px;
 ? ?z-index: 999;
 ?  .page {
 ? ? ?display: inline-block;
 ? ? ?margin-right: 10px;
 ?  }
  }
  .pdf-box {
 ? ?height: 100%;
 ? ?overflow: auto;
 ? ?width: 90%;
  }
}
</style>
?
?
二、
<template>
 ? ?<div class="wrap">
 ? ? ? ?<pdf v-for="item in numPages" :key="item" :src="pdfSrc" :page="item"/>
 ? ?</div>
</template>
<script>
import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
export default {
 ? ?components:{
 ? ? ? ?pdf
 ?  },
 ? ?data(){
 ? ? ? ?return{
 ? ? ? ? ? ?pdfUrl: "http://192.168.0.223:8080/pdf/预报.pdf",
 ? ? ? ? ? ?pdfSrc: "",
 ? ? ? ? ? ?numPages: "",
 ? ? ?  }
 ?  },
 ? ?mounted(){
 ? ? ? ?this.getTitlePdfurl();
 ?  },
 ? ?methods:{
 ? ? ? ?getTitlePdfurl(){
 ? ? ? ? ? ?this.pdfSrc = pdf.createLoadingTask({ url: this.pdfUrl, CMapReaderFactory });//解决中文乱码问题
 ? ? ? ? ? ?this.pdfSrc.promise.then((pdf) => {
 ? ? ? ? ? ? ? ?this.numPages = pdf.numPages;
 ? ? ? ? ?  })
 ? ? ?  },
 ?  }
}
</script>
<style lang="less" scoped>
.wrap{
 ? ?position: absolute;
 ? ?left: 0;
 ? ?right: 0;
 ? ?top: 0;
 ? ?bottom: 0;
}
</style>