VueJS: Visualización de archivos PDF almacenados en unidad (fuera de la carpeta del proyecto)

Answer

1. 

   davy.ai

   June 11, 2023 at 7:34 pm

   Sí, es posible acceder y ver archivos PDF almacenados fuera del proyecto Vue.js a través de la aplicación. Sin embargo, para hacerlo, deberás tener en cuenta ciertas restricciones de seguridad que impiden abrir archivos desde el sistema de archivos local por motivos de seguridad.

   Una solución a este problema podría ser utilizar una biblioteca de terceros como pdf.js o Google Docs Viewer. Estas bibliotecas se pueden utilizar para renderizar documentos PDF en el navegador sin necesidad de que el usuario descargue el archivo o instale software adicional.

   Aquí te mostramos cómo usar pdf.js para ver un archivo PDF en el navegador:

   1. En primer lugar, deberás descargar la biblioteca pdf.js e incluirla en tu proyecto Vue.js.

   2. A continuación, puedes crear un componente que renderice el archivo PDF utilizando pdf.js:

   <template>
     <div>
       <iframe ref="pdfViewer" :src="pdfUrl" style="width:100%;height:100%;"></iframe>
     </div>
   </template>
   
   <script>
   import pdfjsLib from 'pdfjs-dist/webpack';
   
   export default {
     name: 'PdfViewer',
     props: {
       pdfUrl: String,
     },
     mounted() {
       this.loadPdf(this.pdfUrl);
     },
     methods: {
       async loadPdf(url) {
         const loadingTask = pdfjsLib.getDocument(url);
         const pdf = await loadingTask.promise;
         const canvas = this.$refs.pdfViewer;
         const ctx = canvas.contentWindow.document.body;
         for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
           const page = await pdf.getPage(pageNum);
           const viewport = page.getViewport({scale: 1.5});
           canvas.width = viewport.width;
           canvas.height = viewport.height;
           await page.render({canvasContext: ctx, viewport}).promise;
         }
       },
     },
   };
   </script>
   

   1. Finalmente, puedes utilizar este componente para mostrar el archivo PDF en tu aplicación:

   <template>
     <div>
       <a :href="pdfUrl" target="_blank">Ver PDF</a>
       <pdfviewer :pdfurl="pdfUrl"></pdfviewer>
     </div>
   </template>
   
   <script>
   import PdfViewer from './components/PdfViewer.vue';
   
   export default {
     name: 'App',
     components: {
       PdfViewer,
     },
     data() {
       return {
         pdfUrl: 'file:///C:/Users/user/Downloads/mapadecampus.pdf',
       };
     },
   };
   </script>
   

   Aquí hemos creado un componente llamado PdfViewer que utiliza pdf.js para cargar y renderizar el archivo PDF. También hemos incluido un enlace que permite al usuario abrir el archivo en una nueva pestaña.

   Ten en cuenta que la URL utilizada en la propiedad pdfUrl del componente PdfViewer debe ser una URL válida que apunte al archivo PDF. Si el archivo se encuentra en un servidor diferente, es posible que debas configurar el Intercambio de Recursos de Origen Cruzado (CORS) para permitir que el navegador acceda al archivo.

   Esperamos que esto te ayude a encontrar la manera adecuada de ver archivos PDF que se almacenan fuera de una aplicación Vue.js.

Comments are closed.