0

我最初创建了一个按钮，该按钮根据 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 - 有效！

感谢您提供任何帮助以使其正常工作。

4

1 回答 1

0

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

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

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

谢谢。

于 2013-08-23T16:08:38.003 回答