{"id":231,"date":"2014-10-02T02:44:22","date_gmt":"2014-10-02T05:44:22","guid":{"rendered":"http:\/\/arielnavarrete.wordpress.com\/?p=231"},"modified":"2014-10-02T02:44:22","modified_gmt":"2014-10-02T05:44:22","slug":"visualizar-pdf-en-un-iframe-symfony2","status":"publish","type":"post","link":"https:\/\/arielnavarrete.cl\/blog\/2014\/10\/02\/visualizar-pdf-en-un-iframe-symfony2\/","title":{"rendered":"VISUALIZAR PDF EN UN IFRAME SYMFONY2"},"content":{"rendered":"

Hace algunos dias tuve este dilema, mi aplicacion generaba varios PDF, los cuales se guardaban en una subcarpeta dentro de la carpeta web<\/strong> de la aplicacion, pues bien, los PDF existian, eran accesibles para la aplicacion pero… \u00bfComo se los mostraba al Usuario? busque varias formas clasicas en PHP para incrustar el PDF en una pagina web y que fueran visibles como si estuvieramos viendo un PDF online o un documento word pero debido al sistema de rutas que maneja Symfony2 me era un poco problematico.<\/p>\n

<\/p>\n

Mientras buscaba una manera me encontre con un post <\/a>bastante util el cual me ayudo a solucionar este peque\u00f1o gran problema que ya empezaba a ser un dolor de cabeza, el cual detallo a continuacion:<\/p>\n

    \n
  1. Lo primero que haremos sera descargar el Viewer.js<\/strong> desde su pagina oficial viewerjs.org<\/a>, el link de descargar esta mas abajo en la pagina, te recomiendo buscar la palabra \u00abDownload\u00bb con tu navegador, puedes descargar cualquiera de las dos opciones que te da, personalmente descargue la primera.<\/li>\n
  2. Ahora crearemos una carpeta llamada public<\/strong> dentro de nuestro bundle especificamente en symfony\\src\\RutaDelBundle\\Resources<\/strong>, quedando la direccion completa asi symfony\\src\\RutaDelBundle\\Resources\\public<\/strong><\/strong><\/strong> <\/li>\n
  3. Una vez creada la carpeta, tomaremos nuestro archivo descargado de la pagina de viewer y lo descompriremos dentro de la carpeta public<\/strong> que creamos arriba, lo cual nos generara una carpeta llamada por ejemplo viewerjs-0.5.4<\/strong>, asi que la renombraremos y la dejaremos como viewer.js<\/strong><\/strong><\/strong> <\/li>\n
  4. Ahora, haremos que nuestra aplicacion la copie a donde corresponda, para ello ejecutaremos este comando en la consola de windows si te muestra algun error, recuerda que debes estar dentro de la carpeta donde esta tu proyecto para que reconozca app\/console<\/strong>\n
    php app\/console assets:install web<\/pre>\n
    Si todo sale bien, esto nos copiara la carpeta que acabamos de crear a la carpeta web<\/strong> con todo lo que implica.<\/li>\n
  5. Por ultimo para visualizar el PDF en nuestra pagina lo que personalmente hice fue ocupar un iframe y quedo asi, por razones obvias omitire el primer y ultimo signo de apertura y cierre para que no intente cargarlo aqui \ud83d\ude09\n
    iframe\n id=&quot;viewer&quot;\n src=&quot;{{ asset('bundles\/anweb\/viewer.js\/index.html') }}#{{ asset('\/bundle\/pdf\/prueba.pdf') }}&quot;\n width='920' height='400'\n&gt;&lt;\/iframe<\/pre>\n
    Ahora veamos que posee:<\/p>\n
    A) El id viewer te recomiendo no<\/strong> modificarlo para no producir problemas
    \nB) El SRC se divide en tres partes:
    \nB.1) La primera es la ruta que generamos arriba con el comando, puedes buscarla, estara dentro de la carpeta \/web\/bundles\/<\/strong> y debe ir tal cual esta ahi (bundles\/NOMBRE\/viewer.js\/index.html<\/strong>), de otro modo te mostrara un error de ruta.
    \nB.2) La segunda es el #<\/strong> que le indica al Viewer.js que lo que sigue a continuacion es lo que el debe buscar y mostrar.
    \nB.3) Por ultimo la ruta de nuestro archivo te recomiendo que este dentro de la carpeta web<\/strong> para que nuestro asset<\/strong> pueda encontrarlo facilmente.
    \nC) El ancho y alto es segun tus necesidades<\/li>\n<\/ol>\n
    Bueno, con esto ya estaria incrustando nuestro PDF en una pagina web de Symfony2, pero como no todo es copiar y pegar aqui vamos a dar unos peque\u00f1os datos por los cual estuve varias horas indagando en el codigo<\/p>\n
      \n
    1. Para ocultar los botones por ejemplo de Presentacion, Fullscreen, etc debes hacerlo si o si por CSS, ya que de otro modo produciras un error en el Javascript del Viewer y te empezaras a complicar mas de la cuenta, asi que dentro del archivo viewer.js\/index.html<\/strong> crea un\u00a0 tag style<\/strong> y segun el ID que posea lo que deseas ocultar le agregas un display: none<\/strong> y listo.<\/li>\n
    2. Es un detalle menor la verdad, pero en el firebug te muestra un error de 1024 caracteres porque no encuentra la cabecera meta, esto es debido a los comentarios que posee en la parte superior puedes cortarlos y pegarlos al final de la pagina o borrarlos, es tu decision.<\/li>\n
    3. Dentro del listado de Zoom que te muestra existe una opcion llamada custom<\/strong> la cual puedes personalizar, si no la ocuparas te recomiendo comentarla, ya que de otro modo se mostrara una linea vacia.<\/li>\n
    4. Por ultimo pero no menos importante, por defecto al mostrarte un documento te carga una vista Automatic<\/strong> o auto<\/strong> para cambiar esta vista o zoom por alguna de las opciones que te muestra el select scaleSelectContainer<\/strong> (ver index.html), la unica manera que encontre es abrir el archivo viewer.js<\/strong> y buscar:\n
       e(&quot;auto&quot;);<\/pre>\n
      Una vez encontrado esto solo debes cambiar la palabra auto<\/strong> por el valor del select, por ejemplo si deseamos que al cargar el PDF se muestre en Full Width<\/strong> bastara con dejar<\/p>\n
      \u00a0e(&quot;page-width&quot;);<\/pre>\n
      Y listo, notese que la opcion en el archivo index.html<\/strong> es:<\/p>\n
      \u00a0&lt;option id=&quot;pageWidthOption&quot; value=&quot;page-width&quot;&gt;Full Width&lt;\/option&gt;<\/pre>\n
      Nosotros solo tomamos el value que este posee y lo reemplazamos<\/li>\n<\/ol>\n
       <\/p>\n
      Eso seria todo, espero te sea de utilidad.<\/p>\n
       <\/p>\n
      Saludos<\/p>\n","protected":false},"excerpt":{"rendered":"
      Hace algunos dias tuve este dilema, mi aplicacion generaba varios PDF, los cuales se guardaban en una subcarpeta dentro de la carpeta web de la aplicacion, pues bien, los PDF existian, eran accesibles para la aplicacion pero… \u00bfComo se los mostraba al Usuario? busque varias formas clasicas en PHP para incrustar el PDF en una […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[25,28],"class_list":["post-231","post","type-post","status-publish","format-standard","hentry","category-symfony2-2","tag-symfony2","tag-viewer-js"],"_links":{"self":[{"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/posts\/231","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/comments?post=231"}],"version-history":[{"count":0,"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/posts\/231\/revisions"}],"wp:attachment":[{"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/media?parent=231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/categories?post=231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/tags?post=231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}