Question

我最初创建了一个按钮，它根据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 - 工作！

感谢您提供帮助以使其正常运行。

Answer 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');
    });

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

感谢。

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

1 个答案: