Open “Save As” Dialog Box To Download Image

2019-08-15 23:41发布

站内问答 / JavaScript
509 2 3

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.

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.

I don't mind if its JavaScript, JQuery or classic 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.

Here is the Classic ASP code:

<%
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:

<%
'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>

2条回答
ゆ 、 Hurt°
2楼-- · 2019-08-16 00:28

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

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.

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;

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.Stream object to output files to the browser.

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);

/* 
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.

查看更多
0人赞 添加讨论(0) 举报
在下西门庆
3楼-- · 2019-08-16 00:35

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(3)