add-pdf-viewer-in-iframe

package.json

@@ -20,8 +20,7 @@
     "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

@@ -1,72 +0,0 @@
-<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&filter[status][_eq]=published')
+            fetch('https://api8.siliconpin.com/items/scc22?filter[type][_eq]=notice&limit=-1')
             // fetch('https://api8.siliconpin.com/items/scc22?slug=about-us')
                 .then(response => response.json())
                 .then(data => {

src/components/RoutePage.vue

@@ -1,55 +1,23 @@
 <template>
-    <div class="container mx-auto px-4 text-justify my-16">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <div class="container mx-auto px-4 text-justify mt-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">{{ pageData.title }}</h2>
+                    <h2 class="text-2xl text-center pb-4  font-bold">{{ page.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 " v-if="fileAttached">
-                    <h2 class="">{{pageData.title}}</h2>
-                    <div class="app-header">
-                        <template v-if="isLoading"> Loading... </template>
 
-                        <template v-else>
+                <div class="pt-2 flex flex-col justify-center place-items-center " v-if="fileAttached">
-                        <span v-if="showAllPages"> {{ pageCount }} page(s) </span>
+                    <h2>{{ page.title }}</h2>
+                    <div v-for="file in files" :key="file.id">
                         
-                        <span v-else>
+                        <iframe :src="`https://api8.siliconpin.com/assets/` + file.id" class="w-fit sm:w-[400px] md:w-[700px] lg:w-[900px] h-[200px] md:h-[600px] rounded-t-xl shadow-2xl"></iframe>
-                            <button :disabled="page <= 1" @click="page--">❮</button>
+                        <!-- <a class="text-blue-600" :href="`https://api8.siliconpin.com/assets/` + file.id+'?download' "  :download="file.filename_download">{{ file.filename_download }}</a> -->
-
-                            {{ 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 class="" :href="'https://api8.siliconpin.com/assets/' + file"></a> -->
                     </div>
                 </div>
@@ -57,39 +25,15 @@
     </div>
 </template>
 <script>
-import VuePdfEmbed from 'vue-pdf-embed'
-
 export default {
-    components: {
-        VuePdfEmbed
-    },
     data() {
         return {
-            pageCount: 1,
-            pdfSource: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.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 () {
@@ -103,12 +47,12 @@ export default {
             fetch(queryP)
             .then(response => response.json())
             .then(data => {
-            this.pageData = data.data[0]
+            this.page = data.data[0]
             this.content = this.page.content
             this.file = this.page.attachments
             //   console.log(this.file)
             this.isLoading = false
-            return this.pageData.id
+            return this.page.id
             })
             .then((pageID) => {
                 fetch('https://api8.siliconpin.com/items/scc22_files_1?filter[scc22_id][_in]=' + pageID)
@@ -130,7 +74,7 @@ export default {
                             .then(resp => resp.json())
                                 .then(file => {
                                     this.files = file.data
-                                    // console.log(this.files)
+                                    console.log(this.files)
                                 })
                         })
             })
@@ -138,6 +82,9 @@ export default {
                 console.log(error)
                 });
         
-    },
+    }
 }
 </script>
+<style>
+
+</style>

src/pages/index.astro

@@ -1,9 +1,7 @@
 ---
-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">

src/pages/notice/index.astro

@@ -7,6 +7,10 @@ import NoticePage from "../../components/NoticePage.vue"
 // console.log(data)
 ---
 <Layout title="">
+    <main>
+        <div>
+        </div>
+    </main>
     <NoticePage client:visible />
     <!-- <main>
         <div class="container mx-auto mt-3 p-4 ">

yarn.lock

@@ -3820,11 +3820,6 @@ 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"