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

[Marco]

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

[Marco]

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)
      }

[stuffy]

@Marco Thank you much!

[iamyohanarias]

@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?

[walfin]

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

[dobbel]

This post is deleted!

[dobbel]

@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

[iamyohanarias]

@walfin Yes on an Android platform

[dobbel]

@iamyohanarias is there still a problem?

[iamyohanarias]

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

[walfin]

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

[lscorion93]

hi, on ios at resolveLocalFileSystemURL it throws an exception. Any ideas?

[kero]

I’m having an error for creating file.

[dobbel]

@kero

Please create a new post and explain your problem.