web-dev-qa-db-fra.com

«Échec - Erreur réseau» lors de la tentative de téléchargement en HTML5 à l'aide de l'attribut «téléchargement»

Résumé de base de ce que j'essaie de faire:

  • Prendre les fichiers de l'utilisateur (en utilisant le glisser-déposer "dropzone" bootstrap pour recevoir les fichiers)
  • Modifier et faire un peu de "travail" sur les fichiers
  • Compressez les fichiers ensemble pour un seul fichier à télécharger
  • Renvoyer le téléchargement à l'utilisateur pour le téléchargement (soit automatiquement ou dans un lien, détaillé ci-dessous)

La ligne en gras ci-dessus est celle qui ne fonctionne pas et j'essaie de comprendre. Voici le code HTML et javascript correspondant à cette pièce:

<button type="button" class="btn btn-primary" id="transform">
    <span class="glyphicon glyphicon-wrench"></span>
    Transform Uploaded Files
</button>
<a id="test_dl" href="" download="user_download.Zip">
    Download File
</a>
$('#transform').click(function (e) {

    $.getJSON('/transform', {}, function (final_Zip){
        var zipfile = "file://" + final_Zip.zip_filename

        $('a#test_dl').attr("href", zipfile)
    });
});

L'utilisateur clique sur le bouton "Transformer les fichiers téléchargés", qui met ensuite à jour le href vers l'emplacement du fichier zip résultant et peut ensuite télécharger le package résultant en cliquant sur le code HTML "Télécharger le fichier".

J'ai testé cela en Chrome jusqu'à présent et en utilisant la console du développeur, je peux voir que le href est mis à jour correctement avant de cliquer sur le bouton de téléchargement, mais il affiche toujours une boîte de dialogue "Échec - Erreur réseau".

Questions j'espère avoir une réponse

  • Qu'est-ce qui semble mal se passer ici?
  • Est-ce même la bonne façon de procéder? Tout ce que j'essaie de faire, c'est de renvoyer un fichier à l'utilisateur lorsque le processus est terminé. Je crains que "file: //" ne soit pas correct de toute façon et m'échouera lorsque le serveur est réellement distant de l'utilisateur qui l'utilise (actuellement, il est local, car je le développe)

Edit: je dois ajouter que le backend pour cela est actuellement en cours d'exécution sur Python's Flask

javascriptjquerypythonhtmlflask
16
IceBox

Apparemment, c'est un problème Chrome avec l'URL de données trop longue. Je suis toujours en train de le résoudre moi-même, mais il existe apparemment des solutions impliquant des objets Blob.

Voir ici: Télécharger Canvas en PNG dans fabric.js donnant une erreur résea

Et ici: Comment exporter les informations du tableau JavaScript vers csv (côté client)?

19
Canis

Basé sur Comment exporter les informations du tableau JavaScript vers csv (côté client)? voici comment j'ai implémenté une solution à ce problème:

Notez que je n'avais besoin que d'une solution pour Chrome - web, c'est donc ce que j'ai utilisé. Pour une solution complète, vous devrez vérifier les exemples dans la réponse d'origine

$.ajax({
    url: "/getData",
    dataType: "text",
    success: function(data){            
        $("#download").attr({
            "value": "Download",
            "href": URL.createObjectURL(new Blob([data], {
                  type: "application/octet-stream"
            })),
            "download": "outputFile.csv"
        });
    }
});
12
Yanir Calisar