add-pdf-viewer-in-iframe

ui-changes
Dev 1 2023-09-13 13:09:28 +05:30
parent 6ab5ff5847
commit b2847a2ece
2 changed files with 15 additions and 6 deletions

View File

@ -1,4 +1,5 @@
<template> <template>
<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 class="container mx-auto px-4 text-justify mt-16">
<div v-if="isLoading" class=""> <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 class="bg-gray-200 h-screen border-2 border-gray-300 shadow-2xl rounded-md opacity-500"></div>
@ -10,12 +11,13 @@
<div class="flex flex-col place-items-center" v-html="content"></div> <div class="flex flex-col place-items-center" v-html="content"></div>
</div> </div>
</div> </div>
<div class="pt-10 flex flex-col justify-start place-items-start" v-if="fileAttached">
<h2>Attachments</h2> <div class="pt-2 flex flex-col justify-center place-items-center " v-if="fileAttached">
<h2>{{ page.title }}</h2>
<div v-for="file in files" :key="file.id"> <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">
{{ file.filename_download }} <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>
</a> <!-- <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> --> <!-- <a class="" :href="'https://api8.siliconpin.com/assets/' + file"></a> -->
</div> </div>
</div> </div>
@ -82,4 +84,7 @@ export default {
} }
} }
</script> </script>
<style>
</style>

View File

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