在Chrome / Safari中点击数据URI锚点链接时强制另存为框 [英] Force Save As box in Chrome / Safari when clicking on a Data URI anchor link

问题描述

 < A HREF =数据：文本/ CSV; BASE64，CiJpZCIsInJlcXVlc3RfaWQiLCJkYXRlIiwiY29tcGFueV9uYW1lIiwiYWRkcmVzcyIsInBob25lIiwid2Vic2l0ZV91cmwiLCJwbGFjZV9wYWdlX3VybCIsImFkdmVydGlzZXIiLCJyZXZpZXdzIiwicmV2aWV3c190ZXh0Iiwib3duZXJfdmVyaWZpZWQiLCJjYXRlZ29yaWVzIiwibGF0IiwibG5nIiwicGxhY2VodG1sIiwiZ29vZ2xlX3RhZyIsIm1hcHNfdXJsIiwic2l0ZV9kZXNjcmlwdGlvbiIsImRlc2NyaXB0aW9uX2F0dHJpYnV0aW9uIiwib3duZXJfZW1haWwiLCJrZXl3b3JkIiwibGlua3MiCiIxNDc4IiwiNTMyIiwiIiwiU3RhcmJ1Y2tzIiwiMTI5OCBIb3dhcmQgU3RyZWV0LCBTYW4gRnJhbmNpc2NvLCBDQSA5NDEwMyIsIig0MTUpIDU2NS03Mzg1IiwiaHR0cDovL3d3dy5zdGFyYnVja3MuY29tLyIsImh0dHA6Ly9tYXBzLmdvb2dsZS5jb20vbWFwcy9wbGFjZT9obD1lbiZhc19xPXNhbitmcmFuY2lzY28rc3RhcmJ1Y2tzJmFzX2VwcT0mYXNfb3E9JmFzX2VxPSZudW09MTAmbHI9JmFzX2ZpbGV0eXBlPSZhc19zaXRlc2VhcmNoPSZhc19xZHI9YWxsJmFzX3JpZ2h0cz0mYXNfb2NjdD1hbnkmY3I9JmFzX25sbz0mYXNfbmhpPSZzYWZlPWltYWdlcyZ1bT0xJmllPVVURi04JnE9c2FuK2ZyYW5jaXNjbytzdGFyYnVja3MmZmI9MSZocT1zdGFyYnVja3MmaG5lYXI9U2FuK0ZyYW5jaXNjbywrQ0EmY2lkPTQ4NTI1NDg2NzIzODU5NzI1OTMmZWk9bUVWRFRhU05PWWEwbFFmV2haZ3Amc2E9WCZvaT1sb2NhbF9yZXN1bHQmY3Q9cGxhY2VwYWdlLWxpbmsmcmVzbnVtPTImdmVkPTBDQ0lRNGdrd0FRIiwiMCIsIjYiLCIiLCIxIiwiUmVzdGF1cmFudCIsIiIsIiIsIiIsIjAiLCIiLCIiLCIiLCIiLCJzYW4gZnJhbmNpc2NvIHN0YXJidWNrcyIsIkFycmF5IgoiMTQ3OSIsIjUzMiIsIiIsIlN0YXJidWNrcyIsIjEyMzEgTWFya2V0IFN0cmVldCwgU2FuIEZyYW5jaXNjbywgQ0EgOTQxMDMiLCIoNDE1KSA1MjItMTQzOCIsImh0dHA6Ly93d3cuc3RhcmJ1Y2tzLmNvbS8iLCJodHRwOi8vbWFwcy5nb29nbGUuY29tL21hcHMvcGxhY2U / aGw9ZW4mYXNfcT1zYW4rZnJhbmNpc2NvK3N0YXJidWNrcyZhc19lcHE9JmFzX29xPSZhc19lcT0mbnVtPTEwJmxyPSZhc19maWxldHlwZT0mYXNfc2l0ZXNlYXJjaD0mYXNfcWRyPWFsbCZhc19yaWdodHM9JmFzX29jY3Q9YW55JmNyPSZhc19ubG89JmFzX25oaT0mc2FmZT1pbWFnZXMmdW09MSZpZT1VVEYtOCZxPXNhbitmcmFuY2lzY28rc3RhcmJ1Y2tzJmZiPTEmaHE9c3RhcmJ1Y2tzJmhuZWFyPVNhbitGcmFuY2lzY28sK0NBJmNpZD01Mjg4Nzg4OTkwOTk4MjYyOTEzJmVpPW1FVkRUYVNOT1lhMGxRZldoWmdwJnNhPVgmb2k9bG9jYWxfcmVzdWx0JmN0PXBsYWNlcGFnZS1saW5rJnJlc251bT0zJnZlZD0wQ0NrUTRna3dBZyIsIjAiLCIzNiIsIiAiIlN0YXJidWNrcyBoYXMgdGhlIGJlc3QgY29mZmVlIiIgIC0gIGNpdHlzZWFyY2guY29tICAgLi4uICAiIklzbid0IGl0IGVub3VnaCB0aGF0IHRoZXkgYWxtb3N0IG93biBhIG1vbm9wb2x5IGF0IGFsbCBhaXJwb3J0cz8iIiAgLSAgY2l0eXNlYXJjaC5jb20gICAuLi4gICIiSXQgaXMgYSBwaXR5IHRoYXQgYSBjaGFpbiB0aGUgc2l6ZSBvZiBTdGFyYnVjaydzIGlzIGV2ZW4gb24gdGhpcyAiIkJlc3Qgb2YiIiBsaXN0IiIgIC0gIGNpdHlzZWFyY2guY29tICAgLi4uICAiIkV2ZW4gd29yc2UgbW9vZCIiICAtICBjaXR5c2VhcmNoLmNvbSAgIC4uLiAgIiJTZXJ2aWNlIGlzIHVzdWFsbHkgZ3JlYXQiIiAgLSAgY2l0eXNlYXJjaC5jb20gICAuLi4gICIiR3JlYXQgam9iIGd1eXMhIiIgIC0gIGNpdHlzZWFyY2guY29tICAgLi4uICAiIlRoaW5rIGFib3V0IGl0ISIiICAtICBjaXR5c2VhcmNoLmNvbSAgICAiLCIxIiwiQ2FmZSwgQ29mZmVlICZhbXA7IFRlYSwgQ29mZmVlIFNob3BzLCBSZXN0YXVyYW50cywgQ29mZmVlIEhvdXNlcyAmYW1wOyBDYWZlcywgUmVzdGF1cmFudCIsIiIsIiIsIiIsIjAiLCIiLCIiLCIiLCIiLCJzYW4gZnJhbmNpc2NvIHN0YXJidWNrcyIsIkFycmF5IgoiMTQ4MCIsIjUzMiIsIiIsIlN0YXJidWNrcyIsIjE4OTkgVW5pb24gU3RyZWV0LCBTYW4gRnJhbmNpc2NvLCBDQSA5NDEyMyIsIig0MTUpIDkyMS00MDQ5IiwiaHR0cDovL3d3dy5zdGFyYnVja3MuY29tLyIsImh0dHA6Ly9tYXBzLmdvb2dsZS5jb20vbWFwcy9wbGFjZT9obD1lbiZhc19xPXNhbitmcmFuY2lzY28rc3RhcmJ1Y2tzJmFzX2VwcT0mYXNfb3E9JmFzX2VxPSZudW09MTAmbHI9JmFzX2ZpbGV0eXBlPSZhc19zaXRlc2VhcmNoPSZhc19xZHI9YWxsJmFzX3JpZ2h0cz0mYXNfb2NjdD1hbnkmY3I9JmFzX25sbz0mYXNfbmhpPSZzYWZlPWltYWdlcyZ1bT0xJmllPVVURi04JnE9c2FuK2ZyYW5jaXNjbytzdGFyYnVja3MmZmI9MSZocT1zdGFyYnVja3MmaG5lYXI9U2FuK0ZyYW5jaXNjbywrQ0EmY2lkPTk1NjE5NTAwNjUwMTYwMTgwMCZlaT1tRVZEVGFTTk9ZYTBsUWZXaFpncCZzYT1YJm9pPWxvY2FsX3Jlc3VsdCZjdD1wbGFjZXBhZ2UtbGluayZyZXNudW09NCZ2ZWQ9MENEQVE0Z2t3QXciLCIwIiwiMzUiLCIiLCIxIiwiQ2FmZSwgQ29mZmVlICZhbXA7IFRlYSwgQ29mZmVlIFNob3BzLCBDb2ZmZWUgSG91c2VzICZhbXA7IENhZmVzIiwiIiwiIiwiIiwiMCIsIiIsIiIsIiIsIiIsInNhbiBmcmFuY2lzY28gc3RhcmJ1Y2tzIiwiQXJyYXkiCg ==>出口该< / A> 
  

上面是一个包含基本64编码csv数据导出的数据URI。在我的应用程序的报告页面上，我在每个页面视图中嵌入导出，以便导出不需要再次访问数据库。

在Firefox 3中，打开保存为下载对话框。在Chrome 9中点击它不会生效。我可以右键单击保存为在Chrome，它会将解码的csv写入一个文件。点击它在Safari中打开解码的CSV数据在浏览器窗口，我可以手动保存。

在IE ...谁在乎，我是对吗？ p>

您可以通过将< a> 标记完整地复制到一个空白文件test.html并在每个浏览器中打开它。它的行为与它在我的应用程序上下文中的行为完全相同。

问题：是否有强制弹出，如在Firefox中，当用户单击数据URI链接？

理论上，Firefox，Chrome和Safari都支持数据URI。在实践中.......

解决方案

不幸的是，application / octet-stream在Safari至少Safari 6）。它只是将文件保存为未知，没有保存对话框。据我所知，没有跨浏览器的方式来做你想做的，除了反弹服务器上的内容。

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

解决方案

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.

这篇关于在Chrome / Safari中点击数据URI锚点链接时强制另存为框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！