issue in 4vue-pdf-embed
parent
6ab5ff5847
commit
d1bf0d528b
|
|
@ -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"
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -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>
|
||||
|
||||
|
|
@ -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 => {
|
||||
|
|
|
|||
|
|
@ -1,21 +1,55 @@
|
|||
<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">
|
||||
<h2>Attachments</h2>
|
||||
<div v-for="file in files" :key="file.id">
|
||||
<a class="text-blue-600" :href="`https://api8.siliconpin.com/assets/` + file.id+'?download' " :download="file.filename_download">
|
||||
<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>
|
||||
<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>
|
||||
|
|
@ -23,15 +57,39 @@
|
|||
</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 () {
|
||||
|
|
@ -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>
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue