Force Save As box in Chrome / Safari when clicking

问题:

<a href="data:text/csv;base64,CiJpZCIsInJlcXVlc3RfaWQiLCJkYXRlIiwiY29tcGFueV9uYW1lIiwiYWRkcmVzcyIsInBob25lIiwid2Vic2l0ZV91cmwiLCJwbGFjZV9wYWdlX3VybCIsImFkdmVydGlzZXIiLCJyZXZpZXdzIiwicmV2aWV3c190ZXh0Iiwib3duZXJfdmVyaWZpZWQiLCJjYXRlZ29yaWVzIiwibGF0IiwibG5nIiwicGxhY2VodG1sIiwiZ29vZ2xlX3RhZyIsIm1hcHNfdXJsIiwic2l0ZV9kZXNjcmlwdGlvbiIsImRlc2NyaXB0aW9uX2F0dHJpYnV0aW9uIiwib3duZXJfZW1haWwiLCJrZXl3b3JkIiwibGlua3MiCiIxNDc4IiwiNTMyIiwiIiwiU3RhcmJ1Y2tzIiwiMTI5OCBIb3dhcmQgU3RyZWV0LCBTYW4gRnJhbmNpc2NvLCBDQSA5NDEwMyIsIig0MTUpIDU2NS03Mzg1IiwiaHR0cDovL3d3dy5zdGFyYnVja3MuY29tLyIsImh0dHA6Ly9tYXBzLmdvb2dsZS5jb20vbWFwcy9wbGFjZT9obD1lbiZhc19xPXNhbitmcmFuY2lzY28rc3RhcmJ1Y2tzJmFzX2VwcT0mYXNfb3E9JmFzX2VxPSZudW09MTAmbHI9JmFzX2ZpbGV0eXBlPSZhc19zaXRlc2VhcmNoPSZhc19xZHI9YWxsJmFzX3JpZ2h0cz0mYXNfb2NjdD1hbnkmY3I9JmFzX25sbz0mYXNfbmhpPSZzYWZlPWltYWdlcyZ1bT0xJmllPVVURi04JnE9c2FuK2ZyYW5jaXNjbytzdGFyYnVja3MmZmI9MSZocT1zdGFyYnVja3MmaG5lYXI9U2FuK0ZyYW5jaXNjbywrQ0EmY2lkPTQ4NTI1NDg2NzIzODU5NzI1OTMmZWk9bUVWRFRhU05PWWEwbFFmV2haZ3Amc2E9WCZvaT1sb2NhbF9yZXN1bHQmY3Q9cGxhY2VwYWdlLWxpbmsmcmVzbnVtPTImdmVkPTBDQ0lRNGdrd0FRIiwiMCIsIjYiLCIiLCIxIiwiUmVzdGF1cmFudCIsIiIsIiIsIiIsIjAiLCIiLCIiLCIiLCIiLCJzYW4gZnJhbmNpc2NvIHN0YXJidWNrcyIsIkFycmF5IgoiMTQ3OSIsIjUzMiIsIiIsIlN0YXJidWNrcyIsIjEyMzEgTWFya2V0IFN0cmVldCwgU2FuIEZyYW5jaXNjbywgQ0EgOTQxMDMiLCIoNDE1KSA1MjItMTQzOCIsImh0dHA6Ly93d3cuc3RhcmJ1Y2tzLmNvbS8iLCJodHRwOi8vbWFwcy5nb29nbGUuY29tL21hcHMvcGxhY2U/aGw9ZW4mYXNfcT1zYW4rZnJhbmNpc2NvK3N0YXJidWNrcyZhc19lcHE9JmFzX29xPSZhc19lcT0mbnVtPTEwJmxyPSZhc19maWxldHlwZT0mYXNfc2l0ZXNlYXJjaD0mYXNfcWRyPWFsbCZhc19yaWdodHM9JmFzX29jY3Q9YW55JmNyPSZhc19ubG89JmFzX25oaT0mc2FmZT1pbWFnZXMmdW09MSZpZT1VVEYtOCZxPXNhbitmcmFuY2lzY28rc3RhcmJ1Y2tzJmZiPTEmaHE9c3RhcmJ1Y2tzJmhuZWFyPVNhbitGcmFuY2lzY28sK0NBJmNpZD01Mjg4Nzg4OTkwOTk4MjYyOTEzJmVpPW1FVkRUYVNOT1lhMGxRZldoWmdwJnNhPVgmb2k9bG9jYWxfcmVzdWx0JmN0PXBsYWNlcGFnZS1saW5rJnJlc251bT0zJnZlZD0wQ0NrUTRna3dBZyIsIjAiLCIzNiIsIiAiIlN0YXJidWNrcyBoYXMgdGhlIGJlc3QgY29mZmVlIiIgIC0gIGNpdHlzZWFyY2guY29tICAgLi4uICAiIklzbid0IGl0IGVub3VnaCB0aGF0IHRoZXkgYWxtb3N0IG93biBhIG1vbm9wb2x5IGF0IGFsbCBhaXJwb3J0cz8iIiAgLSAgY2l0eXNlYXJjaC5jb20gICAuLi4gICIiSXQgaXMgYSBwaXR5IHRoYXQgYSBjaGFpbiB0aGUgc2l6ZSBvZiBTdGFyYnVjaydzIGlzIGV2ZW4gb24gdGhpcyAiIkJlc3Qgb2YiIiBsaXN0IiIgIC0gIGNpdHlzZWFyY2guY29tICAgLi4uICAiIkV2ZW4gd29yc2UgbW9vZCIiICAtICBjaXR5c2VhcmNoLmNvbSAgIC4uLiAgIiJTZXJ2aWNlIGlzIHVzdWFsbHkgZ3JlYXQiIiAgLSAgY2l0eXNlYXJjaC5jb20gICAuLi4gICIiR3JlYXQgam9iIGd1eXMhIiIgIC0gIGNpdHlzZWFyY2guY29tICAgLi4uICAiIlRoaW5rIGFib3V0IGl0ISIiICAtICBjaXR5c2VhcmNoLmNvbSAgICAiLCIxIiwiQ2FmZSwgQ29mZmVlICZhbXA7IFRlYSwgQ29mZmVlIFNob3BzLCBSZXN0YXVyYW50cywgQ29mZmVlIEhvdXNlcyAmYW1wOyBDYWZlcywgUmVzdGF1cmFudCIsIiIsIiIsIiIsIjAiLCIiLCIiLCIiLCIiLCJzYW4gZnJhbmNpc2NvIHN0YXJidWNrcyIsIkFycmF5IgoiMTQ4MCIsIjUzMiIsIiIsIlN0YXJidWNrcyIsIjE4OTkgVW5pb24gU3RyZWV0LCBTYW4gRnJhbmNpc2NvLCBDQSA5NDEyMyIsIig0MTUpIDkyMS00MDQ5IiwiaHR0cDovL3d3dy5zdGFyYnVja3MuY29tLyIsImh0dHA6Ly9tYXBzLmdvb2dsZS5jb20vbWFwcy9wbGFjZT9obD1lbiZhc19xPXNhbitmcmFuY2lzY28rc3RhcmJ1Y2tzJmFzX2VwcT0mYXNfb3E9JmFzX2VxPSZudW09MTAmbHI9JmFzX2ZpbGV0eXBlPSZhc19zaXRlc2VhcmNoPSZhc19xZHI9YWxsJmFzX3JpZ2h0cz0mYXNfb2NjdD1hbnkmY3I9JmFzX25sbz0mYXNfbmhpPSZzYWZlPWltYWdlcyZ1bT0xJmllPVVURi04JnE9c2FuK2ZyYW5jaXNjbytzdGFyYnVja3MmZmI9MSZocT1zdGFyYnVja3MmaG5lYXI9U2FuK0ZyYW5jaXNjbywrQ0EmY2lkPTk1NjE5NTAwNjUwMTYwMTgwMCZlaT1tRVZEVGFTTk9ZYTBsUWZXaFpncCZzYT1YJm9pPWxvY2FsX3Jlc3VsdCZjdD1wbGFjZXBhZ2UtbGluayZyZXNudW09NCZ2ZWQ9MENEQVE0Z2t3QXciLCIwIiwiMzUiLCIiLCIxIiwiQ2FmZSwgQ29mZmVlICZhbXA7IFRlYSwgQ29mZmVlIFNob3BzLCBDb2ZmZWUgSG91c2VzICZhbXA7IENhZmVzIiwiIiwiIiwiIiwiMCIsIiIsIiIsIiIsIiIsInNhbiBmcmFuY2lzY28gc3RhcmJ1Y2tzIiwiQXJyYXkiCg==">Export This</a>

The above is a Data URI containing a base 64 encoded csv data export. On my app's report page, I embed the export within each page view so that an export doesn't require another trip to the database.

In Firefox 3, clicking this link opens a save-as download dialog box. Clicking it in Chrome 9 does nothing. I can right-click-save-as in Chrome, and it will write the decoded csv to a file. Clicking it in Safari opens the decoded CSV data in the browser window, which I can then save manually.

In IE... who cares, am I right?

You can reproduce this to test for yourself by copying that <a> tag in it's entirety into a blank file called test.html and open it in each browser. It acts exactly the same way as it does in the context of my app.

Question: Is there a way to force a Save As dialog to pop up, as in Firefox, when the user clicks the Data URI link? Or some other way to get around this inconsistency?

In theory, Firefox, Chrome and Safari all support Data URIs. In practice.......

回答1:

Unfortunately, application/octet-stream doesn't work too well in Safari (at least Safari 6). It just saves the file as "unknown" with no Save dialog box. To my knowledge, there's no cross-browser way to do what you're trying to do except to bounce the content off a server.