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

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

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

方法一

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

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

url：传入的下载地址

方法二

javascript">function windowOpen(url) {
            window.open(url);
        }

方法三

javascript">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>javascript">
        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="javascript language-javascript">aHtml('http://127.0.0.1:81/testJS/js.txt')">aHtml</button>
    <button onclick="javascript language-javascript">windowOpen('http://127.0.0.1:81/testJS/js.txt')">windowOpen</button>
    <button onclick="javascript language-javascript">windowLocationHref('http://127.0.0.1:81/testJS/js.txt')">windowLocationHref</button>
    <button id="btn">jQuery</button>
</body>

</html>

异常处理

问题1：当html文件在本地打开时，会对txt文件进行预览打开，无法实现txt文件的下载。

答：需要将txt文件部署在服务器上才可以正常使用，否则只支持预览，点击demo中aHtml按钮效果如下图所示：
在这里插入图片描述
但要注意，此时右键“另存为”，文件类型选择下载的txt文件，同样能够实现文件的下载，只是效果不佳。

问题2：本地测试jQuery的load(）方法时，报错：No ‘Access-Control-Allow-Origin‘ header is present on the requested resource。

答：CORS问题，需要将文件部署在服务器上才可以正常使用，具体讲解可查看【异常】 AJAX 跨域请求报：No ‘Access-Control-Allow-Origin‘ header is present on the requested resource。