pdfModal

src/components/descripcion.vue

@@ -3,11 +3,31 @@
     <div class="row ">
       <div class="col-md-6 col-sm-12 py-5">
         <img :src="src" alt="" class="libro" />
-        <button class="button pre" @click="showModal">
+        <button class="button pre" @click="showModal()">
           Previsualizar
         </button>
 
-        <modal v-show="isModalVisible" @close="closeModal" :pdfPre="PDF" />
+        <div v-if="Visible" @close="closeModal()">
+         <transition name="modal" >
+          <div class="modal-backdrop" @click.self="close()">
+            <div
+              class="modal"
+              role="dialog"
+              aria-labelledby="modalTitle"
+              aria-describedby="modalDescription"
+            >
+              <section class="modal-body rounded" id="modalDescription">
+                <iframe
+                  :src="PDF"
+                  width="100%"
+                  height="100%"
+                  frameborder="0"
+                ></iframe>
+              </section>
+            </div>
+          </div>
+        </transition> 
+        </div>
         <br /><br />
         <div class="container">
           <div class="row izq">
@@ -89,12 +109,12 @@
 import axios from "axios";
 import config from "../config/config.js";
 import Title from "../components/titulo.vue";
-import modal from "../components/previsual.vue";
+//import modal from "../components/previsual.vue";
 
 export default {
   components: {
     Title,
-    modal
+    //modal
   },
 
   data() {
@@ -112,6 +132,7 @@ export default {
       boton2: "",
       categoria: "",
       Libros: [],
+      Visible: false,
 
       isModalVisible: false,
       //PDF: "http://www.ataun.eus/bibliotecagratuita/Cl%C3%A1sicos%20en%20Espa%C3%B1ol/Nicol%C3%A1s%20Maquiavelo/El%20pr%C3%ADncipe.pdf#toolbar=0&navpanes=0&scrollbar=0&zoom=80"
@@ -120,16 +141,20 @@ export default {
     };
   },
   methods: {
+    close() {
+      this.$emit("close");
+    },
+ 
     async descripcion(idLibro) {
       localStorage.clear();
       window.localStorage.setItem("idLibro", idLibro);
       location.reload();
     },
     showModal() {
-      this.isModalVisible = true;
+      this.Visible = true;
     },
     closeModal() {
-      this.isModalVisible = false;
+      this.Visible = false;
     }
   },
   async created() {
@@ -140,18 +165,25 @@ export default {
         `${config.api}/libroDetalle?idLibro=${this.idLibro}`
       );
 
-      detalle = await detalle.data.datos;
+      let detalleDatos = await detalle.data.datos;
 
-      this.titulo = detalle.titulo;
-      this.autor = detalle.autor;
-      this.paginas = detalle.paginas;
-      this.isbn = detalle.isbn;
-      this.edicion = detalle.impresion;
-      this.precio = detalle.precio;
-      this.version = detalle.version;
-      this.desc = detalle.descripcion;
-      this.categoria = detalle.categoria;
-      if (detalle.precio !== "Gratis") this.boton2 = "Comprar";
+      this.titulo = detalleDatos.titulo;
+      this.autor = detalleDatos.autor;
+      this.paginas = detalleDatos.paginas;
+      this.isbn = detalleDatos.isbn;
+      this.edicion = detalleDatos.impresion;
+      this.precio = detalleDatos.precio;
+      this.version = detalleDatos.version;
+      this.desc = detalleDatos.descripcion;
+      this.categoria = detalleDatos.categoria;
+      //let path = `${config.api}/PDFget/?nombrePDF=${nombre}`;
+      this.PDF = `${config.api}/PDFget/?nombrePDF=${detalle.data.pdfVis}`;
+      //console.log(`datos: `,detalleDatos.data );
+      console.log(`Esta es el nombred el pdf ${this.PDF}`);
+
+      window.localStorage.setItem("pdfVis", this.PDF);
+
+      if (detalleDatos.precio !== "Gratis") this.boton2 = "Comprar";
       else this.boton2 = "Descargar";
     } catch (error) {
       console.log(error);
@@ -207,11 +239,41 @@ export default {
     } catch (error) {
       console.log(`Ocurrio un error ${error}`);
     }
+    
   }
+   
 };
 </script>
 
 <style scoped>
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal {
+  background: #ffffff;
+  box-shadow: 2px 2px 20px 1px;
+  /* overflow-x: auto; */
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  width: 90%;
+  height: 90%;
+}
+
+.modal-body {
+  /* position: relative; */
+  padding: 20px 10px;
+}
 .divMaster {
   height: auto;
 }

src/components/previsual.vue

@@ -40,7 +40,10 @@ export default {
   },
   async created() {
     try {
-      let path = `${config.api}/PDFget/?nombrePDF=${this.pdfPre}`;
+     
+      let nombre = window.localStorage.getItem("pdfVis");
+      console.log(`Ruta de pdf ${config.api}/PDFget/?nombrePDF=${nombre}`)
+      let path = `${config.api}/PDFget/?nombrePDF=${nombre}`;
       this.PDF = path;
       console.log(path);
       console.log(config.api);