<!DOCTYPE html>
<html lang="zh">
<head>
<style>
canvas {
margin-bottom: 8px;
box-shadow: 0 2px 8px 4px rgba(0, 0, 0, 0.1);
}
.app-header {
padding: 16px;
box-shadow: 0 2px 8px 4px rgba(0, 0, 0, 0.1);
background-color: #555;
color: #ddd;
display: flex;
justify-content: space-between;
align-items: center;
}
.app-content {
padding: 24px 16px;
}
.right {
margin-bottom: 0;
}
.right input {
margin-right: 5px;
}
.btn {
margin: 0 5px;
}
.pages {
display: flex;
justify-content: center;
align-items: center;
}
[v-cloak]{
display: none;
}
</style>
</head>
<body id="page-top" class="landing-page no-skin-config">
<div id="app">
<div class="container xs-container">
<div v-if="news.pdf">
<div class="app-header">
<template v-if="isLoading">
Loading...
</template>
<template v-else>
<span v-if="showAllPages">
{{ pageCount }} page(s)
</span>
<span v-else>
<button class="btn" :disabled="page <= 1" @click="page--">❮</button>
{{ page }} / {{ pageCount }}
<button class="btn" :disabled="page >= pageCount" @click="page++">❯</button>
</span>
<label class="right"><input v-model="showAllPages" type="checkbox">显示所有页面</label>
</template>
</div>
<div class="app-content">
<vue-pdf-embed ref="pdfRef" :source="news.pdf" :page="page" @rendered="handleDocumentRender"/>
</div>
<div class="pages">
<span v-if="showAllPages">
{{ pageCount }} page(s)
</span>
<span v-else>
<button class="btn" :disabled="page <= 1" @click="page--">❮</button>
{{ page }} / {{ pageCount }}
<button class="btn" :disabled="page >= pageCount" @click="page++">❯</button>
</span>
</div>
</div>
</div>
</div>
<script src="/public/vue/vue2.js"></script>
<script src="https://unpkg.com/vue-pdf-embed@1.0.4/dist/vue2-pdf-embed.js"></script>
<script>
const app = new Vue({
data() {
return {
news: {},
isLoading: true,
page: 1,
pageCount: 1,
showAllPages: false,
}
},
components: {
VuePdfEmbed: window.VuePdfEmbed,
},
watch: {
showAllPages() {
this.page = this.showAllPages ? null : 1
},
},
methods: {
getNewsDetail() {
$.ajax({
url: `pdf 地址`,
success: (res) => {
this.news = res
document.title = res.title
}
})
},
handleDocumentRender() {
this.isLoading = false
this.pageCount = this.$refs.pdfRef.pageCount
}
},
created() {
this.getNewsDetail()
}
})
app.$mount('#app')
</script>
</body>
</html>
vue 中使用 vue-pdf 显示PDF
最新推荐文章于 2024-03-21 11:05:36 发布