Vue使用vue-pdf实现pdf在线浏览

1. 前言
今天在项目看到在线浏览pdf，也不知道怎么实现的，于是我上网查资料，感觉vue-pdf比较简单，适合我这个小菜逼，对于刚入门前端的小白实现在线浏览pdf是有一丢丢帮助的，废话不多说，开干。

2. vue-pdf官网
https://www.npmjs.com/package/vue-pdf（全是英文看又看不懂，只能切换英中来回切换）

3. 安装

npm install --save vue-pdf

注意路径。别在桌面调出来个终端安装了，这种直接打回去重学Vue（菜X）。

4. pdf 页面显示

code

<template><div><pdf ref="pdf":src="url"></pdf></div>
</template>
<script>
import pdf from 'vue-pdf'
export default {components:{pdf},data(){return {url:"http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",}}
</script>

到这里感觉实现了，就出去点了一支烟庆祝一下，回来的时候准备欣赏一下作品时，问题来了，只显示了一张

5. pdf 显示多页

code
多页面的话使用循环呀，简单粗暴（如何不知道循环的还是打回去重学vue）

<template><div><pdfref="pdf"v-for="i in numPages":key="i":src="url":page="i"></pdf></div>
</template>
<script>
import pdf from "vue-pdf";
export default {components: {pdf,},data() {return {url: "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",numPages: null,};},created() {this.getNumPages();},methods: {getNumPages(url) {let loadingTask = pdf.createLoadingTask(this.url);loadingTask.promise.then((pdf) => {this.numPages = pdf.numPages;}).catch((err) => {console.error("pdf 加载失败", err);});},},
};
</script>

问题所在：页数少的话，只有几页，那没什么问题。但是页数多的话问题就来了，比如说有一个pdf页数有一千页，一下子加载完成，浏览器会出现加载的状态，体验感差。
解决方法：使用按需加载的方式实现，开干。

6. pdf 按页预览

code

<template><div><button @click="prePage">上一页</button><button @click="nextPage">下一页</button><div style="margintop: 10px; color: #409eff">{{ pageNum }} / {{ pageTotalNum }}</div><pdf:page="pageNum":src="url"@progress="loadedRatio = $event"@num-pages="pageTotalNum = $event"></pdf></div>
</template>
<script>
import pdf from "vue-pdf";
export default {components: {pdf,},data() {return {url: "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",pageNum: 1,pageTotalNum: 1, //总页数loadedRatio: 0, //当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了};},created() {},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;},},
};
</script>

Vue使用vue-pdf实现pdf在线浏览相关推荐

Word转PDF及SWF在线浏览——Flash Paper
http://flexpaper.devaldi.com/?ref=FlexPaper 之前在项目中研究使用了一套word转PDF,然后将PDF转成SWF的方法,最终实现SWF的在线浏览.自己还有些洋 ...
PDF文档在线浏览防下载加密方案
PDF文档在线浏览防下载加密方案 (在线浏览防下载,文件不落地.禁止打印.禁止另存.禁止文字复制.动态添加防截图水印) 本方案针对PDF文档在线浏览的版权保护. 其突出特点表现在: 在线浏览防下载,文 ...
前端使用pdf.js插件在线浏览pdf
vue中使用PDF.js_没理由的花呗的博客-CSDN博客_pdf.js vue 步骤 1.官网下载pdf.js插件放入一个公用方法文件夹中如utils 2.在需要使用的页面使用iframe标签 &l ...
html 插入可阅读pdf,网站实现在线浏览阅读PDF文件
在指定div中浏览PDF body,html{ font:12px 微软雅黑,Verdana,Arial,Tahoma; background:#BBB; } #example1{ height:50 ...
通过pdf的url在线浏览pdf
通过java controller将pdf下载到web系统中 package com.example.getorder.Controller;import com.sun.org.apache.xer ...
微信公众号或者浏览器实现在线浏览pdf文件
微信公众号或者浏览器实现在线浏览pdf文件实现在线浏览pdf文件方法开发步骤: 实现在线浏览pdf文件方法我们在日常的开发当中经常需要实现pdf文件的显示,最近做了一个在微信公众号中实现pdf浏 ...
springboot整合pdf.js实现在线预览pdf文件
今天在项目中实现pdf在线预览的功能的如图, 通过百度,查询合适的方法,最为简单的的是通过pdf.js的插件在前台展示.本以为是挺容易实现的,但都有莫名其妙的错误. 第一步:下载源码https://g ...
在线浏览ipynb文件
前言我又接到奇奇怪怪的需求了,要求在线浏览ipynb,但我学的是Java,我之前连python都没接触过,甚至对这个文件格式都要先百度一下就很烦,但为了工资还是要继续的对吧. 首先讲一下我的思路,我 ...
前端vue实现pdf文件的在线预览
3.前端vue实现pdf文件的在线预览我是通过 <iframe> 标签就可以满足我工作的 pdf预览需求如果<iframe> 无法满足需求 , 可以使用pdf.js这个插件 ...

Vue使用vue-pdf实现pdf在线浏览

Vue使用vue-pdf实现pdf在线浏览相关推荐

最新文章

热门文章