Question

使用此标记和脚本我可以为Google Chrome 8.0.552.237 OSX创建“拖动文件到桌面”链接（是的！）。我的问题是我无法指定动态创建的脚本文件的名称 - 谷歌浏览器总是将其称为“download.js”，即使我已经指定它应该被称为“customFileName.js”。

有人能给我一些指导吗？这是一个错误，还是我做错了什么？我知道在浏览器中动态创建二进制文件可能是最前沿的错误方面，我应该对它的工作原理感到高兴，但能够命名这些文件对我特定的应用程序来说会有很多用处。米楼。源代码已注释 - 提前感谢：）

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <script>

            var mimeType= 'text/javascript'
            ,   javaScript= 'alert("hello");'
                // convert javascript to binary string
            ,   binaryText= btoa(javaScript)
                // create data uri
            ,   dataUri= "data:text/javascript;charset=utf-8;base64," + binaryText
                // a conventional http url pointing to an image
            ,   resourceUri= 'http://www.chromium.org/_/rsrc/1220198801738/'
                           + 'config/app/images/customLogo/customLogo.gif?revision=2'

                // drag this link to your desktop or other folder and 
                // Google Chrome will download a file to that location 
                // called "download.js" - it should be called "customFileName.js"
            ,   draggableScriptAnchor= document.createElement('a')

                // drag this link to your desktop or other folder and 
                // Google Chrome will download a file to that location 
                // called "customFileName.gif" as expected
            ,   draggableResourceAnchor=document.createElement('a')

            // setup drag to desktop

            // set this anchors href to the data uri
            draggableScriptAnchor.href= dataUri;
            draggableScriptAnchor.innerText= 'Drag dynamic script';
            // listen for drag events
            draggableScriptAnchor.addEventListener
            (
                'dragstart'

            ,   function (mouseEvent)
                {
                    mouseEvent.dataTransfer.setData
                    (
                        "DownloadURL"
                        // note that the convention for this string is
                        // mimetype:filename:url and that the "file"
                        // is given the name "customFileName.js"
                    ,   "text/javascript:customFileName.js:" + dataUri
                    )
                }

            ,   false    
            );

            // set this anchors href to a conventional http url
            draggableResourceAnchor.href= resourceUri
            draggableResourceAnchor.innerText= "Drag image";

            // listen for drag events
            draggableResourceAnchor.addEventListener
            (
                'dragstart'

            ,   function (mouseEvent)
                {
                    mouseEvent.dataTransfer.setData
                    (
                        "DownloadURL"
                        // as above, except that this time the mimetype
                        // is image/gif and the file name is customFileName.gif
                        // THIS WORKS AS EXPECTED
                    ,   "image/gif:customFileName.gif:" + resourceUri
                    )
                }
            )

            // add elements to the DOM
            document.body.appendChild(draggableScriptAnchor);
            document.body.appendChild(document.createElement('br'));
            document.body.appendChild(draggableResourceAnchor);
        </script>
    </body>
</html>

Answer 1

这似乎是Chrome中的一个错误。问题“Drag and drop of 'DownloadURL' type ignores specified filename for data URLs”最近已修复，可能应在Chrome 13版中修复。

如果有人想要测试，请检查此live example。

Answer 2

当我在WIN 7上运行代码时，我的文件名只是“下载”而没有.js扩展名。当我在Win 2008上运行它时，我得到确切的文件名 - customFileName.js

谷歌浏览器拖动到桌面：自定义'文件'名称

2 个答案: