Foro

Home Forums Plugins, Github, NPM Problema al Descargar archivos

This topic contains 2 replies, has 2 voices, and was last updated by Administrador Administrador 4 años, 7 meses .

Viendo 3 respuestas - de la 1 a 3 (de 3 en total)
  • Problema al Descargar archivos

    Intervenciones
  • Ángel Luis Sánchez
    Ángel Luis Sánchez 
    Participant

    Buenas de nuevo,

    tengo un problemilla al descargar archivos y es que no me funciona el window.requestFileSystem. He leído que tiene que estar dentro del deviceReady, pero nose como relacionarlo con el click del button. Dejo mi código a continuación por si me podéis echar una mano:

    1.  <a href="descargar()"><i class="fa fa-download"></i></a>

    Utilizo la librería jsPDF, la cual me descarga archivos sin problemas en el navegador, pero no funciona al pasarlo al dispositivo móvil e intentar guardar el archivo.

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.
    18.
    19.
    20.
    21.
    22.
    23.
    24.
    25.
    26.
    27.
    28.
    29.
    30.
    31.
    32.
    33.
    34.
    35.
    36.
    37.
    38.
    39.
    40.
    41.
    42.
    43.
    44.
    45.

    function descargar(){
      alert("generating pdf...");
      var doc = new jsPDF();
      
      doc.text(20, 20, 'HELLO!');
      
      doc.setFont("courier");
      doc.setFontType("normal");
      doc.text(20, 30, 'This is a PDF document generated using JSPDF.');
      doc.text(20, 50, 'YES, Inside of PhoneGap!');
      
      var pdfOutput = doc.output();
      alert( pdfOutput );
      
      //NEXT SAVE IT TO THE DEVICE'S LOCAL FILE SYSTEM
      alert("file system...");
      window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
      
         alert(fileSystem.name);
         alert(fileSystem.root.name);
         alert(fileSystem.root.fullPath);
      
         fileSystem.root.getFile("test.pdf", {create: true}, function(entry) {
          var fileEntry = entry;
          alert(entry);
      
          entry.createWriter(function(writer) {
           writer.onwrite = function(evt) {
           alert("write success");
          };
      
          alert("writing to file");
           writer.write( pdfOutput );
          }, function(error) {
           alert(error);
          });
      
         }, function(error){
          alert(error);
         });
      },
      function(event){
       alert( evt.target.error.code );
      });
    }

    Aclaro que la etiqueta i es porque utilizo los iconos de fontawesome.
    También tengo instalados los plugins file y fileTransfer y añadidos al config.xml:

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.

    <gap:plugin name="org.apache.cordova.file" />
      <feature name="File">
        <param name="android-package" value="org.apache.cordova.file.FileUtils" />
      </feature>
        <gap:plugin name="org.apache.cordova.file-transfer" />
      <feature name="FileTransfer">
        <param name="android-package" value="org.apache.cordova.filetransfer.FileTransfer" />
      </feature>

    Espero que me puedan ayudar. Saludos!


    Ángel Luis Sánchez
    Ángel Luis Sánchez 
    Participant

    Buenas, ya he solucinado este problema, dejo aquí el código javascript:

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.
    18.
    19.
    20.
    21.
    22.
    23.
    24.
    25.
    26.
    27.
    28.
    29.
    30.
    31.
    32.
    33.
    34.
    35.
    36.
    37.
    38.
    39.
    40.
    41.
    42.
    43.
    44.
    45.
    46.
    47.
    48.
    49.
    50.
    51.
    52.
    53.
    54.
    55.
    56.
    57.
    58.
    59.
    60.
    61.

    $(document).ready(function(){
      document.addEventListener("deviceready", permisos);
      document.addEventListener("offline", function() {
        navigator.notification.alert("Acabas de perder la conexión a internet", null, "Sin conexión", "Aceptar");
      });
      $("#descargar").click(descargar);
    });

    function descargar() {
      alert("generating pdf...");
      var doc = new jsPDF('p', 'pt', 'letter');
      var source = $('#contenido')[0];
      var specialElementHandlers = {
        '#bypassme': function(element, renderer) {
          return true;
        }
      };
      
      doc.fromHTML(
        source,
        40,
        80,
        {
          'width': 552,
          'elementHandlers': specialElementHandlers
        }
      );
      
      var pdfOutput = doc.output();
      alert( pdfOutput );
      
      alert("file system...");
      window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
      
         alert(fileSystem.name);
         alert(fileSystem.root.name);
         alert(fileSystem.root.fullPath);
      
         fileSystem.root.getFile("informacion.pdf", {create: true}, function(entry) {
          var fileEntry = entry;
          alert(entry);
      
          entry.createWriter(function(writer) {
           writer.onwrite = function(evt) {
           alert("write success");
          };
      
          alert("writing to file");
           writer.write( pdfOutput );
          }, function(error) {
           alert(error);
          });
      
         }, function(error){
          alert(error);
         });
      },
      function(event){
       alert( evt.target.error.code );
      });  
    }

    Plugins utilizados:
    - file
    - file-transfer

    Otro problema que tuve es que al incluir el archivo cordova.js, ya que mi archivo HTML que utilizaba el .js descrito arriba, estaba en un nivel más profundo de directorio que mi index.html, la solución es obvia a la hora de linkar el cordova.js

    1.  <script type="text/javascript" charset="utf-8" src="../cordova.js"></script>

    Saludos!


    Administrador
    Administrador 
    Keymaster

    Gracias por compartir la solución :wink:


Viendo 3 respuestas - de la 1 a 3 (de 3 en total)

You must be logged in to reply to this topic.

📆 Adobe Spectrum CSS, una librería Open Source de componentes web y app. 👉 https://t.co/HNHFyP83CU #PhoneGap #Adobehttps://t.co/jhqMGA60jt08:55 AM Feb 10th