File saving on HTML page using JavaScript

Question

I'm trying to develop SignalR JavaScript client (plain HTML page, which gets live updates from my SignalR backend using JavaScript), and I'm struggling with file pushing problem.

What I'm trying to achieve: Backend does some work and saves results to *.zip file on server, pushes this file to client, HTML page offers operator to save the file. Below there is a C# backend code doing zipping and push.

private void CreateZip()
        {
            if (SdkHub.RR.XMLResults && SdkHub.RR.SaveImages)
            {
                using (var zip = new ZipFile())
                {
                    var mstream = new MemoryStream();
                    mstream.Seek(0, SeekOrigin.Begin);
                    zip.AddDirectory(mydir);
                    zip.Save(mstream);
                    mstream.Position = 0;
                    Clients.All.downloadResult(mstream.ToArray(), myName+".zip");
                }
            }
        }

I've spent some time researching "saving files with JavaScript" and found a solution FileSaver.js, which allows to save generated files. My JavaScript code:

downloadResult: function (result, name) {
            try {
                var blob = new Blob(result, { type: "application/zip" });
                saveAs(blob, name);
            } catch (e) {
                alert(e);
            }
        }

I've figured out, that I SignalR converts byte[] to base64 string, so I've made a little update to my C#:

 var intArray = mstream.ToArray().Select(b => (int)b).ToArray();
 Clients.All.downloadResult(intArray, myName+".zip");

While debugging, I see, that received result parameter in JavaScript is an array, equal to byte[] array in C#, and zip file saving is issued, but unfortunately, it's invalid. When I open it using Notepad++, I see my array 8513115 ...

Am I doing something wrong? Maybe there are other solutions to achieve my goal?

Thanks in advance!

Update Screenshot from FireBug debugger

Screenshot from FireBug debugger

can you try constructing the blob using type: 'application/octet-binary' — closure
– closure, Commented Nov 21, 2013 at 8:24
Also let me know the value of result.constructor using the debugger — closure
– closure, Commented Nov 21, 2013 at 8:26

closure · Accepted Answer · 2013-11-21 08:56:46Z

1

Try using Uinit8Array like:

downloadResult: function (result, name) {
  try {
    var u8 = new Uint8Array(result.length);
    for (var i=0; i < result.length; i++) u8[i] = result[i];

      var blob = new Blob(u8, { type: 'application/octet-binary' });
      saveAs(blob, name);
  } catch (e) {
      alert(e);
  }
}

answered Nov 21, 2013 at 8:56

closure

7,4521 gold badge25 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

insomnium_ Over a year ago

It WORKS!!! But with one minor edit: new Blob([u8], { type: 'application/octet-binary' })

closure Over a year ago

Oh, yes. I missed it! Congrats!

Collectives™ on Stack Overflow

File saving on HTML page using JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related