issue in 4vue-pdf-embed

package.json

@@ -20,7 +20,8 @@
     "astro": "^1.7.2",
     "js-cookie": "^3.0.5",
     "tailwindcss": "^3.2.4",
-    "vue": "^3.2.45"
+    "vue": "^3.2.45",
+    "vue-pdf-embed": "^1.1.6"
   },
   "devDependencies": {
     "sass": "^1.57.1"

src/components/NewTemp.vue

@@ -0,0 +1,72 @@
+<template>
+    <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 :disabled="page <= 1" @click="page--">❮</button>
+  
+          {{ page }} / {{ pageCount }}
+  
+          <button :disabled="page >= pageCount" @click="page++">❯</button>
+        </span>
+  
+        <label class="right">
+          <input v-model="showAllPages" type="checkbox" />
+  
+          Show all pages
+        </label>
+      </template>
+    </div>
+  
+    <div class="app-content">
+      <vue-pdf-embed
+        ref="pdfRef"
+        :source="pdfSource"
+        :page="page"
+        @password-requested="handlePasswordRequest"
+        @rendered="handleDocumentRender"
+      />
+    </div>
+  </template>
+  
+  <script>
+  import VuePdfEmbed from 'vue-pdf-embed'
+  
+  // OR THE FOLLOWING IMPORT FOR VUE 2
+  // import VuePdfEmbed from 'vue-pdf-embed/dist/vue2-pdf-embed'
+  
+  export default {
+    components: {
+      VuePdfEmbed
+    },
+    data() {
+      return {
+        isLoading: true,
+        page: null,
+        pageCount: 1,
+        pdfSource:
+          'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf',
+        showAllPages: true
+      }
+    },
+    watch: {
+      showAllPages() {
+        this.page = this.showAllPages ? null : 1
+      }
+    },
+    methods: {
+      handleDocumentRender(args) {
+        console.log(args)
+        this.isLoading = false
+        this.pageCount = this.$refs.pdfRef.pageCount
+      },
+      handlePasswordRequest(callback, retry) {
+        callback(prompt(retry ? 'Enter password again' : 'Enter password'))
+      }
+    }
+  }
+  </script>
+  

src/components/NoticePage.vue

@@ -28,7 +28,7 @@
             }
         },
         mounted: function () {
-            fetch('https://api8.siliconpin.com/items/scc22?filter[type][_eq]=notice&limit=-1')
+            fetch('https://api8.siliconpin.com/items/scc22?filter[type][_eq]=notice&limit=-1&filter[status][_eq]=published')
             // fetch('https://api8.siliconpin.com/items/scc22?slug=about-us')
                 .then(response => response.json())
                 .then(data => {

src/components/RoutePage.vue

@@ -1,39 +1,97 @@
 <template>
-    <div class="container mx-auto px-4 text-justify mt-16">
+    <div class="container mx-auto px-4 text-justify my-16">
         <div v-if="isLoading" class="">
             <div class="bg-gray-200 h-screen border-2 border-gray-300 shadow-2xl rounded-md opacity-500"></div>
         </div>
             <div v-else class="">
                 <div v-if="content" class="w-full flex flex-col justify-center place-items-center">
-                    <h2 class="text-2xl text-center pb-4  font-bold">{{ page.title }}</h2>
+                    <h2 class="text-2xl text-center pb-4  font-bold">{{ pageData.title }}</h2>
                     <div class=" border-2 border-gray-300 shadow-2xl rounded-md opacity-500 p-4 w-full">
                         <div class="flex flex-col place-items-center" v-html="content"></div>
+                        
                     </div>
                 </div>
-                <div class="pt-10 flex flex-col justify-start place-items-start" v-if="fileAttached">
+                <div class="pt-10 flex flex-col " v-if="fileAttached">
-                    <h2>Attachments</h2>
+                    <h2 class="">{{pageData.title}}</h2>
-                    <div v-for="file in files" :key="file.id">
+                    <div class="app-header">
-                        <a class="text-blue-600" :href="`https://api8.siliconpin.com/assets/` + file.id+'?download' "  :download="file.filename_download">
+                        <template v-if="isLoading"> Loading... </template>
+
+                        <template v-else>
+                        <span v-if="showAllPages"> {{ pageCount }} page(s) </span>
+
+                        <span v-else>
+                            <button :disabled="page <= 1" @click="page--">❮</button>
+
+                            {{ page }} / {{ pageCount }}
+
+                            <button :disabled="page >= pageCount" @click="page++">❯</button>
+                        </span>
+
+                        <label class="right">
+                            <input v-model="showAllPages" type="checkbox" />
+
+                            Show all pages
+                        </label>
+                        </template>
+                    </div>
+
+                    <div class="app-content">
+                        <vue-pdf-embed
+                        ref="pdfRef"
+                        :source="pdfSource"
+                        :page="page"
+                        @password-requested="handlePasswordRequest"
+                        @rendered="handleDocumentRender"
+                        />
+  
+                        <!-- <pdf class="" :src="`https://api8.siliconpin.com/assets/` + file.id"/> -->
+                        <!-- <iframe :src="`https://api8.siliconpin.com/assets/` + file.id" ></iframe> -->
+                        <!-- <iframe :src="`https://api8.siliconpin.com/assets/` + file.id" style="overflow:hidden; height:800px;width:100%" height="100%" width="100%"></iframe> -->
+                        <!-- <a class="text-blue-600" :href="`https://api8.siliconpin.com/assets/` + file.id+'?download' "  :download="file.filename_download">
                             {{ file.filename_download }}
-                        </a>
+                        </a> -->
                         <!-- <a class="" :href="'https://api8.siliconpin.com/assets/' + file"></a> -->
                     </div>
                 </div>
-            </div>
+            </div>  
     </div>
 </template>
 <script>
+import VuePdfEmbed from 'vue-pdf-embed'
+
 export default {
+    components: {
+        VuePdfEmbed
+    },
     data() {
         return {
+            pageCount: 1,
+            pdfSource: '/sample-pdf.pdf',
+            showAllPages: true,
+            pageData: null,
             page: null,
             attachment:null,
             content:null,
             isLoading: true,
             files: null,
             fileAttached:false
+        };
+    },  
+    watch: {
+        showAllPages() {
+        this.page = this.showAllPages ? null : 1
         }
     },
+    methods: {
+        handleDocumentRender(args) {
+        console.log(args)
+        this.isLoading = false
+        this.pageCount = this.$refs.pdfRef.pageCount
+        },
+        handlePasswordRequest(callback, retry) {
+        callback(prompt(retry ? 'Enter password again' : 'Enter password'))
+        }
+    }, 
     mounted: function () {
         let path=window.location.pathname.split('/');
         let slug=path[1]
@@ -45,12 +103,12 @@ export default {
             fetch(queryP)
             .then(response => response.json())
             .then(data => {
-            this.page = data.data[0]
+            this.pageData = data.data[0]
             this.content = this.page.content
             this.file = this.page.attachments
             //   console.log(this.file)
             this.isLoading = false
-            return this.page.id
+            return this.pageData.id
             })
             .then((pageID) => {
                 fetch('https://api8.siliconpin.com/items/scc22_files_1?filter[scc22_id][_in]=' + pageID)
@@ -72,7 +130,7 @@ export default {
                             .then(resp => resp.json())
                                 .then(file => {
                                     this.files = file.data
-                                    console.log(this.files)
+                                    // console.log(this.files)
                                 })
                         })
             })
@@ -80,6 +138,6 @@ export default {
                 console.log(error)
                 });
         
-    }
+    },
 }
 </script>

src/pages/index.astro

@@ -1,7 +1,9 @@
 ---
-import Layout from "../layouts/Layout.astro"
+import Layout from "../layouts/Layout.astro";
+import NewTemp from "../components/NewTemp.vue";
 ---
 <Layout title="">
+	<!-- <NewTemp client:visible /> -->
 	<main>
 		<section class="container-fluid">
 			<div class="flex justify-center">

yarn.lock

@@ -3820,6 +3820,11 @@ vscode-uri@^3.0.3, vscode-uri@^3.0.6:
   resolved "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.7.tgz"
   integrity sha512-eOpPHogvorZRobNqJGhapa0JdwaxpjVvyBp0QIUMRMSf8ZAlqOdEquKuRmw9Qwu0qXtJIWqFtMkmvJjUZmMjVA==
 
+vue-pdf-embed@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/vue-pdf-embed/-/vue-pdf-embed-1.1.6.tgz#5bb806ed495970c09fb955c9fa40fb3a6bd4fced"
+  integrity sha512-CRQIw8OxiD6H1n8KT2zVWbp/00fA3PgSV/JYJ0Ut+FdC1jHrRDHNBj3BvaRVwZFZg3EJ8LLjyEDYxWWUMOjrDw==
+
 vue@^3.2.45:
   version "3.2.45"
   resolved "https://registry.npmjs.org/vue/-/vue-3.2.45.tgz"