作为一个初级前端工程师,遇到了一个棘手的问题,就是在移动端展示pdf文件,当然,遇到不会的第一件事是百度,网上有pdf.js,但是vue中有一个可以偷懒的直接npm的组件,由于我是政府项目,项目代码不能使用,我使用线下自己代码做演示.
第一步是npm install --save vue-pdf
<template>
<div>
<div>pdf预览</div>
<pdf
:src="pdfUrl"// src需要展示的PDF地址
v-for="i in numPages" :key="i" :page="i"> // 多页显示></pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components: {
pdf
},
data(){
return{
pdfUrl: '',
numPages:1, // pdf 文件总页数。
}
},
mounted: function() {
this.getNumPages("http://www.gov.cn/zhengce/pdfFile/2020_PDF.pdf")
},
methods: {
getNumPages(url) {
let loadingTask = pdf.createLoadingTask(url)
//这个方法创建一个当前pdf的加载任务,可以作为:src使用或者公开的获取当前pdf的页面总数;
loadingTask.then(pdf => {
this.url = loadingTask
this.numPages = pdf.numPages
}).catch((err) => {
console.error('pdf加载失败')
})
},
}
}
</script>
API Props属性 :srcString/Object pdf的链接,可以是相对、绝对地址或者是一个pdf的加载任务; :pageNumber-default:1 需要展示pdf的第几页; :rotateNumber-default:0 pdf的旋转角度,‘90’的倍数才有效; Events回调 @password(updatePassword,reason) updatePassword:函数提示需要输入的密码; reason:提示('NEED_PASSWORD' or 'INCORRECT_PASSWORD'); @progressNumber pdf的页面的加载进度,Rang[0,1]; @page-loadedNumber pdf某个页面加载成功回调,number为页面索引值; @num-pagesNumber 监听pdf加载,获取pdf的页数; @errorObject pdf加载失败回调; @link-clickedNumber 单机内部链接时触发; Public methods公共方法 print(dpi,pageList) 调用浏览器打印功能; dpi打印的分辨率(100) pageList需要打印的页面array Public static methods静态方法 createLoadingTask(src) 这个方法创建一个当前pdf的加载任务,可以作为:src使用或者公开的获取当前pdf的页面总数; 详细讲解:https://www.cnblogs.com/lodadssd/p/10297989.html