vue安装vue-pdf(预览pdf)（2021/03/02）

vue安装vue-pdf(预览pdf)

# npm

npm install --save vue-pdf

# 页面引用

// pdf预览
import pdf from "vue-pdf";

# 页面使用

Home.vue

src/views/Home.vue

<template><div class="main"><div><button type="button" @click="changePdfPage(0)">上一页</button><button type="button" @click="changePdfPage(1)">下一页</button></div><p>{{ currentPage }} / {{ pageCount }}</p><div><button type="button" @click="scaleD()">放大</button><button type="button" @click="scaleX()">缩小</button></div><div><button type="button" @click="clock()">顺时针</button><button type="button" @click="counterClock()">逆时针</button></div><pdfref="pdf":src="src":page="currentPage":rotate="pageRotate"@num-pages="pageCount = $event"@page-loaded="currentPage = $event"@loaded="loadPdfHandler"></pdf></div>
</template><script>
// pdf预览
import pdf from "vue-pdf";
export default {name: "Home",components: {pdf},data() {return {src:"http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",currentPage: 0, // pdf文件页码pageCount: 0, // pdf文件总页数scale: 100,pageRotate: 0};},methods: {// pdf加载时loadPdfHandler(e) {e;this.currentPage = 1; // 加载的时候先加载第一页},// 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页changePdfPage(val) {if (val === 0 && this.currentPage > 1) {this.currentPage--;}if (val === 1 && this.currentPage < this.pageCount) {this.currentPage++;}},//放大scaleD() {this.scale += 5;this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";},//缩小scaleX() {if (this.scale === 100) {return;}this.scale += -5;this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";},// 顺时针clock() {this.pageRotate += 90;},// 逆时针counterClock() {this.pageRotate -= 90;}}
};
</script><style scoped>
.main {width: 500px;margin: 0 auto;border: 2px solid #409eff;padding: 10px;
}
</style>

默认显示第一页

更多请看文档：https://www.npmjs.com/package/vue-pdf

vue安装vue-pdf(预览pdf)（2021/03/02）相关推荐

Vue中使用pdfJs预览PDF、图片
Vue中使用pdfJs预览PDF.图片 pdf.js是一个使用HTML5构建的可移植文档格式库.它可以帮助我们在浏览器中构建pdf文档,实现在线查看pdf文件的功能. 实现步骤如下: 1.下载pdfJ ...
一个使用js做的一个PDF预览PDF标注（在线批注）工具
一个使用js做的一个PDF预览&PDF标注工具核心主要使用pdf.js以及操作canvas 目前支持web端,windows端,mac端,可npm包引入项目目前支持的功能有大文件预览.缩略 ...
vue 项目中实现pdf预览 pdf打印 pdf下载
在Vue项目中实现PDF预览.打印和下载可以通过以下步骤来实现: 安装pdf.js pdf.js是一个JavaScript库,可以用于在Web上渲染PDF文件. 可以使用npm安装pdf.js,命令如 ...
移动端H5+vue使用vue-pdf在线预览PDF
需求是点击查看收据按钮,进入新页面直接显示收据,可以放大.缩小.旋转.下载,没有分页 1.安装 npm i vue-pdf --save 2.使用 <template><div &g ...
vue 手机移动端预览pdf
最新需求是在手机实现pdf的预览,最终采用的是pdfh5,可以保存为图片,比较方便首先pdf返回的是pdf文件流接收pdf文件流的时候需要设定文件类型responseType: 'arraybuf ...
Vue项目实现在线预览pdf，并且可以批量打印pdf
最近遇到一个需求,就是要在页面上呈现pdf内容,并且还能用打印机批量打印pdf,最终效果如下: 当用户在列表页面,勾选中两条数据后,点击"打印表单"按钮之后,会跳到如下的预览页面: ...
前端（vue）js在线预览PDF、Word、Excel、ppt等office文件
js解決 window.open("https://view.xdocin.com/view?src=" + encodeURIComponent(url) + '&too ...
pdf预览 pdf.js+pdfObject
1.下载pdf.js 第一步,下载源码:git clone git://github.com/mozilla/pdf.js.git (直接github下载zip 不能直接使用) 第二步 ,cd pdf ...
pdf预览-pdf.js预览base64格式的数据
前言 pdf.js框架的魅力所在,为其为HTML5实现的,无需任何本地支持,而且对浏览器的兼容性也是比较好,要求只有一个:浏览器支持HTML5就好了!(不过对于低版本的IE,就只能节哀了!) 以下是p ...
uniapp移动端H5在线预览PDF等文件实现源码及注解
uniapp移动端H5预览文件实现分为两个场景处理: (这里以预览PDF文件为示例,在线预览就是查看网络文件) 1. IOS客户端预览PDF文件 IOS客户端预览PDF文件可以通过跳转文件地址实现预览 ...

vue安装vue-pdf(预览pdf)（2021/03/02）

vue安装vue-pdf(预览pdf)

# npm

# 页面引用

# 页面使用

vue安装vue-pdf(预览pdf)（2021/03/02）相关推荐

最新文章

热门文章