|
@@ -1,15 +1,31 @@
|
|
|
<template>
|
|
|
+ <!-- npm install vue-pdf@4.3.0 -->
|
|
|
+ <!-- npm install vue-pdf@1.0.2 -->
|
|
|
<!-- pdf_container -->
|
|
|
- <div>
|
|
|
+ <div class="preview_pdf">
|
|
|
+ <h1 style="text-align: center">PDF在线预览</h1>
|
|
|
+ <!-- <div style="text-align: center">
|
|
|
+ <button id="prev" @click="prevPage">上一页</button>
|
|
|
+ <button id="next" @click="nextPage">下一页</button>
|
|
|
+ <span>
|
|
|
+ 当前页:
|
|
|
+ <span id="page_num">{{ pageNum }}</span>
|
|
|
+ /
|
|
|
+ <span id="page_count">{{ numPages }}</span></span
|
|
|
+ >
|
|
|
+ </div> -->
|
|
|
<pdf
|
|
|
:src="downUrl"
|
|
|
:page="pageNum"
|
|
|
@num-pages="setNumPages"
|
|
|
@page-loaded="onPageLoaded"
|
|
|
></pdf>
|
|
|
- <p>当前页: {{ pageNum }} / {{ numPages }}</p>
|
|
|
- <button @click="prevPage">上一页</button>
|
|
|
- <button @click="nextPage">下一页</button>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <p style="text-align: center">当前页: {{ pageNum }} / {{ numPages }}</p>
|
|
|
+ <button @click="prevPage">上一页</button>
|
|
|
+ <button @click="nextPage">下一页</button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -35,17 +51,6 @@ export default {
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
- handleWheel(event) {
|
|
|
- console.log("gadsfqwerqweqr===0=");
|
|
|
- const deltaY = event.deltaY;
|
|
|
- console.log("gadsfqwerqweqr===1=" + deltaY);
|
|
|
- if (deltaY > 0) {
|
|
|
- this.prevPage();
|
|
|
- } else {
|
|
|
- this.nextPage();
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
prevPage() {
|
|
|
var page = this.pageNum;
|
|
|
if (page > 1) {
|
|
@@ -55,7 +60,7 @@ export default {
|
|
|
|
|
|
nextPage() {
|
|
|
var page = this.pageNum;
|
|
|
- if (page < this.numPages - 1) {
|
|
|
+ if (page < this.numPages) {
|
|
|
this.pageNum++;
|
|
|
}
|
|
|
},
|
|
@@ -78,45 +83,12 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.pdf_container {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- height: 100vh;
|
|
|
- margin: 0 auto;
|
|
|
-}
|
|
|
-
|
|
|
-.button_container {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- height: 100vh;
|
|
|
- margin: 0 auto;
|
|
|
-}
|
|
|
-
|
|
|
-.styled_button {
|
|
|
- justify-content: center;
|
|
|
- background-color: #4caf50; /* Green */
|
|
|
- border: none;
|
|
|
- color: white;
|
|
|
- padding-left: 80;
|
|
|
- padding-right: 40;
|
|
|
- padding-top: 40;
|
|
|
- padding-bottom: 40;
|
|
|
- text-align: center;
|
|
|
- align-items: center;
|
|
|
- text-decoration: none;
|
|
|
- display: inline-block;
|
|
|
- font-size: 16px;
|
|
|
- margin: 10px 0;
|
|
|
- cursor: pointer;
|
|
|
- border-radius: 8px;
|
|
|
- transition: background-color 0.3s;
|
|
|
-}
|
|
|
-
|
|
|
-.styled_button:hover {
|
|
|
- background-color: #45a049;
|
|
|
+.preview_pdf {
|
|
|
+ h1 {
|
|
|
+ margin: 30px auto;
|
|
|
+ text-align: center;
|
|
|
+ font-family: "宋体";
|
|
|
+ letter-spacing: 2px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|