admin管理员组文章数量:1648974
很多pdf插件不支持vue3,或者是没有集成翻页放大缩小功能,故写此分享。
1. 安装依赖
npm i vue-pdf-embed -S
npm i vue3-pdfjs -S
<template>
<div>
<div class="div">
<el-button @click="prev">上一页</el-button>
<el-button @click="next">下一页</el-button>
<el-button @click="zoomA">放大</el-button>
<el-button @click="zoomB">缩小</el-button>
</div>
<vue-pdf-embed :source="source"
class="vue-pdf-embed"
:style="scaleFun"
:page="pageNum" />
</div>
</template>
<script>
import VuePdfEmbed from "vue-pdf-embed";
import { createLoadingTask } from "vue3-pdfjs/esm"; // 获得总页数
export default {
components: {
VuePdfEmbed,
},
data() {
return {
source:
"http://storage.xuetangx/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",
pageNum: 1,
scale: 1, // 缩放比例
numPages: 0, // 总页数
};
},
mounted() {
const loadingTask = createLoadingTask(this.source);
loadingTask.promise.then((pdf) => {
this.numPages = pdf.numPages;
});
},
computed: {
scaleFun(index) { // 缩放
var scale = this.scale;
return `transform:scale(${scale})`;
},
},
methods: {
prev() {
if (this.pageNum > 1) {
this.pageNum -= 1;
}
},
next() {
if (this.pageNum < this.numPages) {
this.pageNum += 1;
}
},
zoomA() {
this.scale += 0.1;
},
zoomB() {
this.scale -= 0.1;
},
},
};
</script>
<style scoped>
.div {
top: 0;
position: fixed;
z-index: 999;
}
.vue-pdf-embed {
text-align: center;
}
</style>
效果
版权声明:本文标题:vue3实现pdf文件预览,分页,放大缩小 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1729505240a1203550.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论