javascript 打开“另存为”对话框以下载图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22612009/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Open "Save As" Dialog Box To Download Image
提问by Lankymart
I've been checking all over the place for an answer to this one but no luck.
我一直在到处检查这个问题的答案，但没有运气。
I want a button or link that will open the "Save As" dialog box. Simple?
我想要一个可以打开“另存为”对话框的按钮或链接。简单的？
I know I can open the image in a new window/tab (as I'm doing now) and then use the right-click, save asmethod but as the people using this are not the sharpest knives in the box, so I want to make the download as simple as possible.
我知道我可以在新窗口/选项卡中打开图像（就像我现在正在做的那样）然后使用该right-click, save as方法，但由于使用它的人不是盒子里最锋利的刀，所以我想让下载变得简单尽可能。
The code at the moment is:
目前的代码是：
<button class="downloadButton" type="submit" onClick="window.open('<%=(rsContent.Fields.Item("ContentImage").Value)%>')">Download Image</button>
but this loads the image into a new window/new tab.
但这会将图像加载到新窗口/新选项卡中。
Just for the record, the users are using Windows XP with Internet Explorer 8 so we can't use the downloadHTML5 event.
只是为了记录，用户使用 Windows XP 和 Internet Explorer 8，所以我们不能使用downloadHTML5 事件。
I don't mind if its JavaScript, JQuery or classic ASP.
我不介意它的 JavaScript、JQuery 或经典的 ASP。
Thanks in advance for the help.
在此先感谢您的帮助。
Pb
铅
UPDATE
更新
Using the MDN code Lankymartposted, I tried as-is and it worked (for the open/download of an Excel document), however, I tried changing parts to download images and it didn't work.
使用Lankymart发布的 MDN 代码，我按原样尝试并且它有效（用于打开/下载 Excel 文档），但是，我尝试更改部件以下载图像，但它不起作用。
Here is the Classic ASP code:
这是经典的 ASP 代码：
<%
Dim rsImage__imageID
rsImage__imageID = "1"
If (Request.QueryString("imageID") <> "") Then
rsImage__imageID = Request.QueryString("imageID")
End If
%>
<%
Dim rsImage
Dim rsImage_cmd
Dim rsImage_numRows
Set rsImage_cmd = Server.CreateObject ("ADODB.Command")
rsImage_cmd.ActiveConnection = MM_ENG_STRING
rsImage_cmd.CommandText = "SELECT ContentID, ContentImage, DisplayImage FROM tblContent WHERE ContentImage = ?"
rsImage_cmd.Prepared = true
rsImage_cmd.Parameters.Append rsImage_cmd.CreateParameter("param1", 5, 1, -1, rsImage__imageID) ' adDouble
Set rsImage = rsImage_cmd.Execute
rsImage_numRows = 0
%>
and the (badly) altered MDN code:
和（严重）改变的 MDN 代码：
<%
'Set the content type to the specific type that you are sending.
Response.ContentType = "image/JPEG"
Const adTypeBinary = 1
Dim strImageFile
strImageFile = (rsImage.Fields.Item("ContentImage").Value) 'This is the path and name of the file on disk.
Set objStream = Server.CreateObject("ADODB.Stream")
objStream.Open
objStream.Type = adTypeBinary
objStream.LoadFromFile strImageFile
Response.BinaryWrite objStream.Read
objStream.Close
Set objStream = Nothing
%>
I call it using:
我称之为：
<button class="downloadButton" type="submit" onClick="window.location.href='image-download.asp?imageID=<%=(rsContent.Fields.Item("ContentID").Value)%>';">Download Image</button>
The error it produces is:
它产生的错误是：
The image “http://localhost:85/admin/english/image-download.…p?imageID=5” cannot be displayed because it contains errors.
The page code is:
页面代码为：
<html>
<head>
<meta name="viewport" content="width=device-width; height=device-height;"></meta>
<link rel="stylesheet" href="resource://gre/res/ImageDocument.css"></link>
<link rel="stylesheet" href="resource://gre/res/TopLevelImageDocument.css"></link>
<link rel="stylesheet" href="chrome://global/skin/media/TopLevelImageDocument.css"></link>
<title>
image-download.asp (JPEG Image)
</title>
</head>
<body>
<img src="http://localhost:85/admin/english/image-download.asp?imageID=5" alt="The image “http://localhost:85/admin/english/image-download.…p?imageID=5” cannot be displayed because it contains errors." title=""></img>
</body>
</html>
回答by Sérgio S. Filho
You can create a button that point to a link returning the image as a file and it will show the save option automatically instead of navigate to another page.
您可以创建一个指向将图像作为文件返回的链接的按钮，它会自动显示保存选项，而不是导航到另一个页面。
On the server side, specify the mime type as application/octect-stream
在服务器端，将 mime 类型指定为 application/octect-stream
回答by Lankymart
Update- Related to comments in the question
更新- 与问题中的评论相关
You may also find you need to include
您可能还会发现您需要包括
Response.AddHeader("Content-Length", LenB(yourbinary))
To stop some browsers from failing to validate the payload. Also it's important the the ContentTypematches what is sent if you are unsure use
阻止某些浏览器无法验证有效负载。ContentType如果您不确定使用，匹配发送的内容也很重要
Response.Content = "application/octet-stream"
There is no way to initiate the Save As Dialog from the browser via javascript but you can fake the browser into displaying the Save As dialog by setting the attachmentvalue in the Content-DispositionHTTP header.
无法通过 javascript 从浏览器启动另存为对话框，但您可以通过设置HTTP 标头中的attachment值来伪造浏览器显示另存为对话框Content-Disposition。
The way I've tackled this is use a ASP page to generate the image (via COM component, ADODB.Stream, database blob etc) that way you can use;
我解决这个问题的方法是使用 ASP 页面来生成图像（通过 COM 组件、ADODB.Stream、数据库 blob 等），您可以使用这种方式；
Response.AddHeader("Content-Disposition", "attachment;filename=myimage.jpg")
This will force the image to be saved rather than displayed inline. So with a script like this you can pass one querystring value to it to display inline (when viewing the image) and one to force it as an attachment which will force the Save As dialog (browser behaviour may be slightly different).
这将强制保存图像而不是内嵌显示。因此，使用这样的脚本，您可以将一个查询字符串值传递给它以显示内联（查看图像时），另一个将其强制为附件，这将强制另存为对话框（浏览器行为可能略有不同）。
Streaming to the Browser
Using the
ADODB.Streamobject to output files to the browser.
- Return an image using ASP, not .NET(StackOverflow)
- How To Use the ADODB.Stream Object to Send Binary Files to the Browser through ASP(Microsoft Support).
流式传输到浏览器
使用
ADODB.Stream对象将文件输出到浏览器。
- 使用 ASP 返回图像，而不是 .NET (StackOverflow)
- 如何使用 ADODB.Stream 对象通过 ASP 将二进制文件发送到浏览器（Microsoft 支持）。
In the past I've initiated the Save As dialog using javascript (but there is nothing stopping you using a HTML anchor tag to do the same thing without any javascript);
过去，我使用 javascript 启动了另存为对话框（但没有什么能阻止您使用 HTML 锚标记在没有任何 javascript 的情况下执行相同的操作）；
/*
passing myimageid is a way of identifying the image to return
be it a database or file system lookup.
*/
window.location.href = "/myimage.asp?id=myimageid&display=attachment";
Because the response comes back as an attachment the location is never actually changed and the Save As dialog is displayed immediately with the name of the file passed from the Content-DispositionHTTP header in the file name box.
由于响应作为附件返回，因此位置实际上从未更改，并且会立即显示“另存为”对话框，并Content-Disposition在文件名框中显示从HTTP 标头传递的文件名。
