admin管理员组文章数量:1649152
GitHub地址:vue-pdf
首先引入第三方库:
npm install vue-pdf
然后在需要的文件中进行导入和注册
import pdf from "vue-pdf"
export default {
components: {
pdf
},
}
使用:
<template>
<div class="vue-pdf">
<pdf src="shanhaijing.pdf"></pdf>
</div>
</template>
例子(直接使用我这个模板一行一行调试):
<template>
<div class="vue-pdf">
<el-button type="primary" @click="dialogVisible = true">预览</el-button>
<el-button type="primary" @click="test">测试</el-button>
<el-dialog
:visible.sync="dialogVisible"
width="30%"
:center="true">
<pdf src="shanhaijing.pdf" :page="pageNum" @num-pages="pageTotalNum = $event"></pdf>
<span slot="footer" class="dialog-footer">
<el-button @click="prePage">上一页</el-button>
<span>{{ pageNum }} / {{ pageTotalNum }}</span>
<el-button @click="nextPage">下一页</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import pdf from "vue-pdf"
export default {
name: 'TesttwodebugVuePdf',
data() {
return {
// 打开dialog
dialogVisible: false,
// 显示页数
pageNum: 1,
// 总页数
pageTotalNum: 1,
};
},
mounted() {},
components: {
pdf
},
methods: {
// 切换上一页
prePage() {
let p = this.pageNum;
p = p > 1 ? p - 1 : this.pageTotalNum;
this.pageNum = p;
},
// 切换下一页
nextPage() {
let p = this.pageNum;
p = p < this.pageTotalNum ? p + 1 : 1;
this.pageNum = p;
},
// 实在不想自己写的可以使用浏览器自带的打开PDF文档(放链接)
test(){
window.open('XXXXX/XXXX.pdf')
},
};
</script>
<style lang="scss" scoped>
.el-icon-download {
border: 1px solid #ccc;
cursor: pointer;
}
</style>
版权声明:本文标题:Vue预览PDF,使用vue-pdf,基本使用教程 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1729504535a1203474.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论