使用插件
npm install --save vue-pdf
<template>
<div id="app">
<el-button type="text" @click="dialogVisible = true"
>点击打开 Dialog</el-button
>
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
<div>
<pdf
class="yansg"
ref="pdf"
:src="url"
:page="pageNum"
:rotate="pageRotate"
@progress="loadedRatio = $event"
@page-loaded="pageLoaded($event)"
@num-pages="pageTotalNum = $event"
@error="pdfError($event)"
@link-clicked="page = $event"
>
</pdf>
<div class="tools">
<bk-button
:theme="'default'"
type="submit"
:title="'基础按钮'"
@click.stop="prePage"
class="mr10"
>
上一页</bk-button
>
<bk-button
:theme="'default'"
type="submit"
:title="'基础按钮'"
@click.stop="nextPage"
class="mr10"
>
下一页</bk-button
>
<span class="page">{{ pageNum }}/{{ pageTotalNum }}</span>
<!-- <bk-button
:theme="'default'"
type="submit"
:title="'基础按钮'"
@click.stop="clock"
class="mr10"
>
顺时针</bk-button
>
<bk-button
:theme="'default'"
type="submit"
:title="'基础按钮'"
@click.stop="counterClock"
class="mr10"
>
逆时针</bk-button
> -->
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false"
>确 定</el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
import pdf from "vue-pdf";
export default {
name: "Home",
components: {
pdf,
},
data() {
return {
url: "/24/61177cf1-61eb-4c81-a864-13ef421a19b1.pdf",
pageNum: 1,
pageTotalNum: 1,
pageRotate: 0,
// 加载进度
loadedRatio: 0,
curPageNum: 0,
dialogVisible: false,
};
},
mounted: function () {},
methods: {
// 上一页函数,
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);
},
},
};
</script>
<style>
.yansg {
width: 80%;
height: 100%;
overflow: hidden;
margin: 0 auto;
}
.el-dialog__body{
padding: 0 10px !important;
text-align: right;
}
</style>