简体   繁体   English

打开“另存为”对话框以下载图像

[英]Open “Save As” Dialog Box To Download Image

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 as method 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 download HTML5 event. 仅作记录,用户正在使用Windows XP和Internet Explorer 8,因此我们无法使用HTML5 download事件。

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 Lankymart posted, 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>

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

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 ContentType matches 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 attachment value in the Content-Disposition HTTP header. 无法通过javascript从浏览器启动“另存为”对话框,但是您可以通过在Content-Disposition HTTP标头中设置attachment值来伪造浏览器以显示“另存为”对话框。

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). 因此,使用这样的脚本,您可以向其传递一个querystring值以内联显示(查看图像时),并向其中传递一个查询字符串值以强制其作为附件,这将强制“另存为”对话框(浏览器行为可能会略有不同)。

Streaming to the Browser 流到浏览器

Using the ADODB.Stream object to output files to the browser. 使用ADODB.Stream对象将文件输出到浏览器。

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-Disposition HTTP header in the file name box. 因为响应作为附件返回,所以位置实际上不会更改,并且“另存为”对话框将立即显示,并在文件名框中显示从Content-Disposition HTTP标头传递来的文件名。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM