3

have a browser program that lets the user play chess - move pieces etc. trying to let the user download the resultant pgn (Content-Type: PGN) directly from browser.

does it have something to do with data:URI? is there some example somewhere?

only interested in modern browsers

cc young
  • 18,939
  • 31
  • 90
  • 148

2 Answers2

2

I am not quite sure if I understand your question correctly. Do you mean you generate an image in PNG format but the browser does not offer download, instead shows the image directly?

If so, the solution is to indicate a file for download by setting the appriopriate MIME type as HTTP header "content type".

In PHP you do it like this:

header("Content-Type: application/force-download");

or

header("Content-Type: application/octet-stream");

When the browser receives this MIME type it will not try to display the content itself.

Daniel Böhmer
  • 14,463
  • 5
  • 36
  • 46
  • do not want any interaction with server. standalone html page with javascript. user enters moves. want to output those moves as a PGN for the user. – cc young Mar 11 '11 at 16:10
  • Ah, I see. For PGN you can have a textbox with the file content and the user saves it via copy & paste. I don't see how JavaScript should be able to provide a file for the browser to download. – Daniel Böhmer Mar 11 '11 at 16:13
  • No PGN is not PNG mispelled, PGN is Portable Game Notaton :http://en.wikipedia.org/wiki/Portable_Game_Notation That said I still do not fully understand the question. – HBP Mar 11 '11 at 16:14
  • I think the question is : "How can I provide to the user data internally generated by a web app." – HBP Mar 11 '11 at 16:16
  • +1 to halo's asnwers. @cc young, if you have server side code - add headers above; if you have just JavaScript - there is no way to generate downloadable file, use copy-paste approach suggested. – Alexei Levenkov Mar 11 '11 at 17:22
  • 1
    @AlexeiLevenkov there is a way to create a downloadable file with JavaScript if you can live with the limitations of [Data URIs](http://en.wikipedia.org/wiki/Data_URI_scheme), and in the future we'll have the [File Writer API](http://www.w3.org/TR/file-writer-api/) – robertc Mar 12 '11 at 01:03
0

You can use a Data URI but there are some limitations. Here's an example, based on my answer to an earlier question. The first thing you'll note is that you can't really control the filename, but it works OK in Firefox and Chrome other than that, but probably not so well in IE (I've not tried it).

Assuming you can already generate the PGN as a string, the code to create a Data URI is quite straightforward:

function exportData(data, target) {
    var exportLink = document.createElement('a');
    exportLink.setAttribute('href', 'data:application/x-chess-pgn;base64,' + window.btoa(data));
    exportLink.appendChild(document.createTextNode('sample.pgn'));
    document.getElementById(target).appendChild(exportLink);
}

Just set data with whatever you're generating and set up an element to hold the link once it's created.

In the future we'll have better solutions for this sort of issue, but there's no browser support for it yet.

Community
  • 1
  • 1
robertc
  • 74,533
  • 18
  • 193
  • 177
  • on your example, click url and nothing happens – cc young Mar 12 '11 at 09:41
  • using chrome - hoping to find Download modal window – cc young Mar 12 '11 at 09:45
  • @ccyoung Works for me, a file save dialogue pops up when I click the link. What version of Chrome do you have? I'm on 10.0.648.127 beta. – robertc Mar 12 '11 at 09:49
  • @ccyoung Then you could maybe accept the answer instead of just saying it ;) – robertc Mar 12 '11 at 23:13
  • was thinking same thing. have never used stackoverflow to ask questions before. clicked on check mark - hope that works. btw, am having problems logging in - isp rerouting submits - so limited until that gets cleared – cc young Mar 13 '11 at 04:23