保存网址到桌面

发表于 | 分类于

一个保存网址到桌面的小记。

1、日常应用场景

当我们开发好一个网站时，由于某些原因没有固定的入口，导致用户会找不到要访问的页面，这个时候，保存到桌面的功能就显得尤为重要。

前端代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
    /**
     * [
     *     saveToDesktop
     *     IE:可以将数据写进文件并保存到桌面；
     *     fireFox:可以选择路径将写进数据的文件保存；
     *     chrome:只能保存到浏览器指定的下载目录下；
     * ]
     * @param  {[string]} fileName [文件名 如："test.txt"]
     * @param  {[string]} data     [数据 如："username:key \r\n password:123456"]
     */
    function saveToDesktop(fileName, data) {
        var explorer = navigator.userAgent.toLowerCase();
        if (explorer.indexOf("trident") > 0) {//IE 5+
            var wss = new ActiveXObject("WScript.Shell");
            var desktopUrl = wss.SpecialFolders("Desktop");
            var fso = new ActiveXObject("Scripting.FileSystemObject");
            var tf = fso.CreateTextFile(desktopUrl + "\" + fileName, true);
            tf.Write(data);
            tf.Close();
        } else {//fireFox chrome
            var urlObj = window.URL || window.webkitURL || window;
            var blob = new Blob([data]);
            var link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
            link.href = urlObj.createObjectURL(blob);
            link.download = fileName;
            saveClick(link);
        }

        function saveClick(obj) {
            var e = document.createEvent("MouseEvents");
            e.initMouseEvent(
                "click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null
            );
            obj.dispatchEvent(e);
        }
    }
    var file={};//这个文件是从后端接口获取的
    saveToDesktop('xxx.url', file);

2、注意事项

如果不跟后端交互，直接前端自己存储页面的dom结构是一点意义都没有的：

1）保存的纯dom页面不能与服务端交互；

2）里面的代码会被用户看到，极大程度上给了用户篡取网站信息的可能。

所以在真实的开发场景中，数据处理都是由后端进行的，前端只需调用接口就好：

1
2
3
4
5
6
function saveToDesk () {
    var nodeA = document.createElement("a");
    nodeA.href = "xxx";//要下载的路径
    nodeA.target = "_blank";
    nodeA.click();
}