效果:
安装组件vue-pdf
附上vue-pdf的官方地址:https://www.npmjs.com/package/vue-pdf
yarn:
yarn install vue-pdf
npm:
npm install --save vue-pdf
1、pdf.vue 代码,只有一页的
<pdf :src="pdfSrc" ></pdf>
js:
import pdf from 'vue-pdf' export default { components: {pdf}, data () { return { src:'/static/1.pdf',// pdf文件地址 } }, created() { // 有时PDF文件地址会出现跨域的情况,这里最好处理一下 this.src= pdf.createLoadingTask({url:this.src}) }, method: { } }
注意:文件要放在public文件夹下,不然会报错:
Warning: Ignoring invalid character "33" in hex string'
原因:读取 PDF 文件时,路径不合法,导致读取不到文件; 在 vue-cli3 脚手架搭建的项目中,读取本地的 PDF 文件需要放到 public 文件夹中,在引用时,不能使用相对路径,且‘/’即表示 public 文件夹 (需略去 public);
2、pdf.vue 代码,多页,放在一个页面滚动查看,类似浏览器查看pdf文件
<template> <div class="pdf" v-show="fileType === 'pdf'"> <pdf :src="src" v-for="i in pageCount" :key="i" :page="i" > </pdf> </div> </template> <script> import pdf from 'vue-pdf' export default { components: {pdf}, data () { return { currentPage: 1, // pdf文件页码 pageCount: 4, // pdf文件总页数 fileType: 'pdf', // 文件类型 src:'/static/1.pdf',// pdf文件地址 } }, created() { // 有时PDF文件地址会出现跨域的情况,这里最好处理一下 this.src= pdf.createLoadingTask({url:this.src}) }, method: { } } </script>
3、添加分页器(附带旋转、放大、缩小的方法)
这种方式更灵活,但是如果项目自身配置禁止缩放功能的话,还需要手动导入vue-meta-info
yarn add vue-meta-info
main.js:
import MetaInfo from 'vue-meta-info' Vue.use(MetaInfo)
pdf.vue
<div> <div class="tools"> <van-button type="default" @click.stop="prePage" class="mr10">上一页</van-button> <div class="page">{{pageNum}}/{{pageTotalNum}} </div> <van-button type="default" @click.stop="nextPage" class="mr10">下一页</van-button> <!-- <van-button type="default" @click.stop="clock" class="mr10">顺时针</van-button> <van-button type="default" @click.stop="counterClock" class="mr10">逆时针</van-button> <van-button type="default" @click.stop="scaleBig" class="mr10">放大</van-button> <van-button type="default" @click.stop="scaleSmall" class="mr10">缩小</van-button>--> </div> <pdf :src="pdfSrc" :page="pageNum" class="pdf" ref="wrapper" :rotate="pageRotate" @progress="loadedRatio = $event" @page-loaded="pageLoaded($event)" @num-pages="pageTotalNum=$event" @error="pdfError($event)" @link-clicked="page = $event"> </pdf> </div> import pdf from 'vue-pdf' import { Button } from 'vant'; export default { metaInfo: { // 这里是给页面修改 title: '', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes' } ] }, components: { pdf, }, data() { return { pdfSrc: '', numPages: 1 // pdf 文件总页数 } }, mounted() { this.getNumPages("https://xxxxx.com/pdf/xxx.pdf") }, methods: { getNumPages(url) { var loadingTask = pdf.createLoadingTask(url); loadingTask.promise .then((pdf) => { this.pdfSrc = loadingTask; this.pageTotalNum = pdf.pageTotalNum; }) .catch((err) => { console.error("pdf加载失败"); }); }, // 上一页函数, 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; }, // 页面顺时针翻转90度。 clock() { this.pageRotate += 90; }, // 页面逆时针翻转90度。 counterClock() { this.pageRotate -= 90; }, // 页面加载回调函数,其中e为当前页数 pageLoaded(e) { this.curPageNum = e; }, // 其他的一些回调函数。 pdfError(error) { console.error(error); }, scaleBig() { this.scale += 10; this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%"; }, scaleSmall() { if (this.scale == 100) { return; } this.scale += -10; this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%"; // this.$refs.wrapper.$el.style.transform = "scale(" + this.scale + ")"; }, } }
参考文章:https://www.jianshu.com/p/f00e7266bbb1