当 MVC ActionResult 调用文件下载时 mouseup 上的图像损坏答案

【问题标题】：Broken image on mouseup when MVC ActionResult called for file download当 MVC ActionResult 调用文件下载时 mouseup 上的图像损坏
【发布时间】：2013-08-24 00:08:38
【问题描述】：

我最初创建了一个基于 mouseup 和 mousedown 更改 src 的按钮，使其在单击时看起来像是被按下以及播放单击声音。在我尝试通过 MVC 操作强制下载 PDF 之前，这一切都很好。我尝试用几种不同的方式给这只猫换皮，但我决定使用 mouseup 功能将窗口位置设置为我的 pdf 下载操作，传递所需的文件下载路径信息。现在，当我单击它按下的按钮时（正确执行 mousedown），然后在 mouseup 上它会正确播放单击声音并根据需要下载 pdf 文件，但会使按钮图像看起来损坏。

当我第一次加载页面并且尚未单击按钮时，图像看起来应该是这样。然后在运行 mouseup 之后它被破坏了（使用 Chrome 或在 IE 和 Safari 中消失或出现乱码）但是当我检查源时 src 属性看起来是相同的，所以我不确定如果 src 相同，为什么它会返回一个损坏的图像和以前一样。

代码-

查看jquery：

var audio = document.getElementsByTagName("audio")[0];

    $('#MAAX-DGB-Button').mouseup(function () {
        $(this).attr('src', '../../Content/Images/AdLandingViews/MAAX-DGB.png');
        audio.play();

        var pdfDownload = '/Locator/ForcePDFDownload?PDFURL=<file location info>';
        window.location = pdfDownload;
    });
    $('#MAAX-DGB-Button').mousedown(function () {
        $(this).attr('src', '../../Content/Images/AdLandingViews/MAAX-DGB_press.png');
    });

查看 HTML：

<img src="../../Content/Images/AdLandingViews/MAAX-DGB.png" alt="Download MAAX Collection Brochure" id="MAAX-DGB-Button" />

ForcePDFDownload MVC 动作：

public ActionResult ForcePDFDownload(string PDFURL)
    {
        string path = @"\\<server location>\" + PDFURL;
        string filename = Path.GetFileName(PDFURL);
        Response.AppendHeader("Content-Disposition", "attachment; filename=" + filename);
        return File(path, "application/pdf");
    }

您可以在这里测试代码： https://maaxspasportal.com/Locator/AdLandingLocate/MAAXCollection，但您必须填写一些虚拟数据并提交表单，才能通过“下载绿色手册”按钮进入出现此问题的结果页面。

经过测试的浏览器：

Chrome 版本 28.0.1500.95 - 图像出现损坏。

IE 10 - 图像消失或看起来乱码。

Safari 6.0.5 - 图片消失。

FireFox 22.0 - 有效！

感谢任何帮助使其正常工作。

【问题讨论】：

标签： javascript jquery html asp.net-mvc asp.net-mvc-4

【解决方案1】：

好吧，我从未确定问题的确切根本原因，但我确实找到了解决问题的方法。

在 mouseup 上，我在强制 pdf 下载功能上应用了 setTimeout 延迟：

var audio = document.getElementsByTagName("audio")[0];

    $('#MAAX-DGB-Button').mouseup(function () {
        $(this).attr('src', '../../Content/Images/AdLandingViews/MAAX-DGB.png');
        audio.play();

        var pdfDownload = '/Locator/ForcePDFDownload?PDFURL=assets.maaxspas.com/docsources/1/138ee0a8-e0f0-47d5-9447-fca6f538d74f.pdf';
        setTimeout(function() { window.location = pdfDownload }, 1000);
    });
    $('#MAAX-DGB-Button').mousedown(function () {
        $(this).attr('src', '../../Content/Images/AdLandingViews/MAAX-DGB_press.png');
    });

仍然有兴趣知道出了什么问题，但至少它正在按照我现在想要的方式运行。

谢谢。

【讨论】：