[Solved] [V1] Download a file in cordova app



  • Hi all,
    my spa application download a file with the code below:

    this.$axios.post('/api/v1', { url: url, retType: 'excel' },
            { responseType: 'blob' }).then(function (response) {
            const url = window.URL.createObjectURL(new Blob([response.data]))
            const link = document.createElement('a')
            link.href = url
            link.setAttribute('download', fileName)
            document.body.appendChild(link)
            link.click()
            $q.loading.hide()
          }).catch(function (/* error */) {
            $q.loading.hide()
          })
    

    It works fine even in chrome on my android phone (pie).
    I built the android cordova app; it works but when I press the button to download the file it silently fails.
    Do you think the problem is some permission missed on the manifest or do I need to use a cordova plugin ?

    Is this the problem?

    window.URL.createObjectURL()
    

    Thanks



  • Solved using cordova-plugin-file.
    Replace:

    const url = window.URL.createObjectURL(new Blob([response.data]))
            const link = document.createElement('a')
            link.href = url
            link.setAttribute('download', fileName)
            document.body.appendChild(link)
            link.click()
    
    

    with:

     var blob = new Blob([response.data])
    
     if (typeof cordova !== 'undefined') {
         saveBlob2File(fileName, blob)
     }
    
    

    cordova file plugin code:

         function saveBlob2File (fileName, blob) {
            var folder = cordova.file.externalRootDirectory + 'Download'
            window.resolveLocalFileSystemURL(folder, function (dirEntry) {
              console.log('file system open: ' + dirEntry.name)
              createFile(dirEntry, fileName, blob)
            }, onErrorLoadFs)
          }
    
          function createFile (dirEntry, fileName, blob) {
            // Creates a new file
            dirEntry.getFile(fileName, { create: true, exclusive: false }, function (fileEntry) {
              writeFile(fileEntry, blob)
            }, onErrorCreateFile)
          }
    
          function writeFile (fileEntry, dataObj) {
            // Create a FileWriter object for our FileEntry
            fileEntry.createWriter(function (fileWriter) {
              fileWriter.onwriteend = function () {
                console.log('Successful file write...')
              }
    
              fileWriter.onerror = function (error) {
                console.log('Failed file write: ' + error)
              }
              fileWriter.write(dataObj)
            })
          }
    
          function onErrorLoadFs (error) {
            console.log(error)
          }
    
          function onErrorCreateFile (error) {
            console.log(error)
          }
    


  • @Marco Thank you much!



  • @Marco Wonderful my friend but I have a problem. It doesn’t recognize the “cordova” word. I cant put the condition to download for browser and mobile apps. Can you help me?



  • Did you do “cordova plugin add cordova-plugin-file” in src-cordova?



  • This post is deleted!


  • @iamyohanarias that means Cordova is not installed (as a global npm libary).

    https://cordova.apache.org/docs/en/3.1.0/guide/cli/index.html

    install cordova globally and make it available to your CLI:
    npm install -g cordova



  • @walfin Yes on an Android platform
    f6bf2f19-576a-48a9-bec8-ddca0592cb22-image.png



  • @iamyohanarias is there still a problem?



  • @dobbel Yes. it doesn’t recognize cordova object even an android app



  • @iamyohanarias What if you try window.cordova instead of cordova?


Log in to reply