Téléchargement d'un fichier en javascript

Cette fonctionnalité se couple particulièrement bien avec celle-là, puisque le téléchargement du fichier permet d’avoir accès à la progression.

Concrètement, on s’occupe d’aller activer le download directement par AJAX, d’avoir le retour directement dans un blob puis de générer un bouton qu’on s’occupera de cliquer de manière seamless.

// La façon la plus simple, sans progression visuelle pour l'utilisateur
File.download('/export')
  .then((link) => { link.click() })

// Avec un paramètre X
File.download('/export', { x : 'paramètre' })
  .then((link) => { link.click() })

// Avec un paramètre et la progression. Je simule partiellement un component en VueJS pour les besoins de la cause :)
methods: {
  loadFile() {
    File.download('/export', { x : 'paramètre' }, this.progress)
      .then((link) => { link.click() })
  },
  progress(e) {
    // Attribuer les valeurs à notre component ProgressBar
    console.log('PROGRESS', e)
  }
}
import Vue from 'vue'

// Votre librairie favorite pour les calls HTTP
const client = {}

export default {
  download(url, data, progressCallBack) {
    let request = client.get(url, {
      progress: progressCallBack
    })
    return request.then((response) => {
      var result = document.createElement('a');
      var contentDisposition = response.headers.get('Content-Disposition') || '';
      var filename = contentDisposition.match(/filename=(.+);/)[1];
      filename = filename.replace(/"/g, '')
      return response.blob()
        .then(function (data) {
          result.href = window.URL.createObjectURL(data);
          result.target = '_self';
          result.download = filename;
          return result;
        })
    })
  }
}

Gabriel Robert

Gabriel Robert
Développeur @spektrummedia / @snipcart / @userboat

Recueil de commandes / scripts utilitaires

Voici une liste plutôt personelle de différentes commandes pouvant être utiles et qui permettent d'améliorer la productivité dans la vie ...… Continuer à lire