vue

2023-11-15 07:37| 来源: 网络整理| 查看: 265

1. 前言

PDF文件在线预览的功能相信大家都是有遇到过的, 但在我平时的项目中, 公司提供了相应的插件, 但是在h5等其他项目中, 我们还是只能靠自己呀! 今天就大概说一下 vue-pdf 这个组件, 大部分的需求还是可以满足的

2. 安装 npm install --save vue-pdf 3. pdf 页面显示 3.1 code import pdf from 'vue-pdf' export default { components:{ pdf }, data(){ return { url:"http://image.cache.timepack.cn/nodejs.pdf", } } 3.2 展示

这个时候, pdf文件已经显示在页面上了, 但是我们可以发现, 这仅仅显示了pdf 文件的第一页

image 4. pdf 显示多页 4.1 code import pdf from 'vue-pdf' export default { components:{ pdf }, data(){ return { url:"http://image.cache.timepack.cn/nodejs.pdf", numPages: null, // pdf 总页数 } }, mounted() { this.getNumPages() }, methods: { # 计算pdf页码总数 getNumPages() { let loadingTask = pdf.createLoadingTask(this.url) loadingTask.promise.then(pdf => { this.numPages = pdf.numPages }).catch(err => { console.error('pdf 加载失败', err); }) }, } 4.2 展示 image

这时候我们可以通过滑动预览pdf的内容, 但是这种方式是一下子把pdf的内容都加载出来, 页数一多, 浏览器直接卡在加载的状态, 体验感太差,所以我们可以考虑按页加载

5. pdf 按页预览 5.1 code 上一页下一页 {{ pageNum }} / {{ pageTotalNum }} import pdf from 'vue-pdf' export default { name: 'Pdf', components: { pdf, }, data() { return { url: 'http://image.cache.timepack.cn/nodejs.pdf', pageNum: 1, pageTotalNum: 1, # 总页数 loadedRatio: 0, # 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了 } }, methods: { // 上一页 prePage() { let page = this.pageNum page = page > 1 ? page - 1 : this.pageTotalNum this.pageNum = page }, // 下一页 nextPage() { let page = this.pageNum page = page < this.pageTotalNum ? page + 1 : 1 this.pageNum = page } } } 5.2 展示 image

至此, 大概效果就如上所示

6. 更多内容

npm vue-pdf

【本文地址】

vue

vue

今日新闻

推荐新闻