Télécharger l'image en utilisant Javascript/jQuery

Question

Nous utilisons asp.net et C# 3.5 implémentant un site web utilisant beaucoup de jQuery. Nous voudrions télécharger un img de la fenêtre du navigateur, mais (et voici l'astuce) dans un bouton clic (en plus de clic droit Enregistrer sous) ...

Avant d'entrer dans, je dois dire que nous savons qu'il s'agit d'un tag img et à partir de l'extrémité avant, nous pouvons facilement télécharger l'image en utilisant le clic droit enregistrer sous. La seule raison pour laquelle nous voulons télécharger l'image d'un (par exemple) bouton clic est parce que sur le site que nous ont des boutons de téléchargement pour télécharger le contenu (comme DataTable fichiers Excel et pdfs, etc.) et nous de préférence comme pour garder la norme sur le site Web .

Nous produisons des graphiques en utilisant Microsoft Chart Control ce qui rend les graphiques à l'écran plutôt bien. Cela rend une image sur l'écran comme indiqué ci-dessous dans un exemple (en utilisant Firebug)

<div align="center" style="margin-top: 30px; margin-bottom: 30px;" id="graph"> 
    <img style="border-width: 0px; height: 500px; width: 465px;" alt="Chart Loading" src="/Telma.UI/ChartImg.axd?i=chart_194e3c04c11240a7b7fba3e3e1d76d39_2.jpeg&amp;g=338b984aaab84b1da9a63db3150211e2" borderdashstyle="Solid" id="ctl00_Chart1"> 
</div> 

La balise img est généré par le contrôle graphique qui, dans le asp est dans une balise <asp:Chart>.

Maintenant, comme une note latérale importante que nous avons dans le web.config

<add key="ChartImageHandler" value="storage=session;privateImages=true;timeout=10;deleteAfterServicing=false;WebDevServerUseConfigSettings=true;" /> 

Il y a un bug connu avec MS Control Chart que si vous enregistrez l'image dans les variables de session ou de la mémoire, que l'image est seulement accessible une fois et non persistant. Nous n'avons pas d'emplacement physique pour l'image lors de sa création (et le plus souvent, le contrôle de graphique désoriente l'image). Ce dont nous avons besoin, c'est d'une méthode côté client pour télécharger ce contenu d'image à partir de l'écran tel qu'il est rendu, mais sans avoir accès à l'image physique à l'extrémité arrière. Nous ne souhaitons pas utiliser la propriété de contrôle de graphique:

ImageStorageMode="UseImageLocation" 

Des idées? Rappelez-vous, nous essayons d'ajouter des fonctionnalités supplémentaires que juste un clic droit enregistrer sous.

EDIT: Cela doit fonctionner dans Firefox et IE.

Answer 1

Vous pouvez écrire le script de téléchargement, ce qui oblige le fichier passé en paramètre à télécharger (bz changer les en-têtes http) et vous aurez juste faire quelque chose comme (jQuery):

$("a#downloadButton").attr("href","link/to/forcedownload.asp?f="+$("#img").attr("src")); 

Aussi don » t oubliez (si vous le faites de cette façon) de nettoyer/désinfecter les paramètres, sinon les gens auront le moyen de télécharger vos scripts, s'ils ont maintenant le bon répertoire/nom. Cependant, je pense que vous pourriez faire la même chose avec ASP, si ce n'est pas une sorte de système de gestion de contenu. Editer: ou fait par AJAX ...:]
Editer: Lire la dernière réponse ... si vous générez des graphiques à la volée, il doit être possible de générer à nouveau le même graphique, si les données sont le même, n'est-ce pas? Si oui, puis à télécharger de téléchargement, transmettre les données (ou un lien vers eux, ou gestionnaire, ou SQL ou quelque chose) et dans ce script générer une nouvelle image et l'envoyer directement avec force télécharger au client.

Edit: nouvelle idée:] Ne pas exécuter sql 2 fois - dans le document parent, appeler un autre script qui exécute SQL, crée l'image, enregistre à mettre en cache et sorties au navigateur avec l'image http tête - ce façon, vous avez une image sur le disque (dans un répertoire tmp), dans le navigateur, et peut lier à l'image - avec un sql. Espérons que cela aide

Answer 2

essayer ceci, cela PROMT utilisateur final pour ouvrir ou enregistrer le fichier

Response.ContentType = myDataReader.Item (1) .toString Response.AppendHeader ("-de disposition de contenu:", « pièce jointe; nom de fichier = "+ myDataReader.Item (2) .ToString) Response.WriteFile (Server.MapPath (" documents/"& myDataReader.Item (0).ToString))