【JavaScript】多种实现文件下载的工具类

方法一
方法二
方法三
整体调用代码
异常处理

示例以下载txt文件为例，代码已封装上传，可直接下载资源在服务器中使用。如有异常，可查看“异常处理”小节或评论区指出。

方法一

在html中，可以采用<a href="./js.txt" download>下载</a>实现文件的下载，据此，在JavaScript对其进行实现，封装后函数如下：

function aHtml(url) {//<a href="./js.txt" download>下载</a>
            let a = document.createElement('a');
            a.href = url;
            a.click();
        }

url：传入的下载地址

方法二

function windowOpen(url) {
            window.open(url);
        }

方法三

function windowLocationHref(url) {
            window.location.href = url;
        }

整体调用代码

该部分代码涉及以上所有方法，以及相关的调用。其中提及jquery的$("#div1").load("http://127.0.0.1:81/testJS/js.txt");使用，由于文件直接加载到了页面上，无法以txt文件形式进行直接下载保存，因此并没有在所提及的方法中展示，如呈现效果符合实际需求，也可以根据需要进行使用。

图中乱码为该txt文件为加密文件导致，不涉及代码问题

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>demo</title>
    <script>
        function aHtml(url) {//<a href="./js.txt" download>下载</a>
            let a = document.createElement('a');
            a.href = url;
            a.click();
        }
        function windowOpen(url) {
            window.open(url);
        }
        function windowLocationHref(url) {
            window.location.href = url;
        }
        $(document).ready(function () {
            $("#btn").click(function () {
                $("#div1").load("http://127.0.0.1:81/testJS/js.txt");
            });
        });
    </script>
</head>

<body>
    <div id="div1">jQuery AJAX</div>
    <button onclick="aHtml('http://127.0.0.1:81/testJS/js.txt')">aHtml</button>
    <button onclick="windowOpen('http://127.0.0.1:81/testJS/js.txt')">windowOpen</button>
    <button onclick="windowLocationHref('http://127.0.0.1:81/testJS/js.txt')">windowLocationHref</button>
    <button id="btn">jQuery</button>
</body>

</html>