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

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

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

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

方法一

在html中,可以采用下载实现文件的下载,据此,在JavaScript对其进行实现,封装后函数如下:

function aHtml(url) {//下载
            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文件为加密文件导致,不涉及代码问题

【JavaScript】多种实现文件下载的工具类_第1张图片

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">script>
    <title>demotitle>
    <script>
        function aHtml(url) {//下载
            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 AJAXdiv>
    <button onclick="aHtml('http://127.0.0.1:81/testJS/js.txt')">aHtmlbutton>
    <button onclick="windowOpen('http://127.0.0.1:81/testJS/js.txt')">windowOpenbutton>
    <button onclick="windowLocationHref('http://127.0.0.1:81/testJS/js.txt')">windowLocationHrefbutton>
    <button id="btn">jQuerybutton>
body>

html>

异常处理

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

答:需要将txt文件部署在服务器上才可以正常使用,否则只支持预览,点击demo中aHtml按钮效果如下图所示:
【JavaScript】多种实现文件下载的工具类_第2张图片
但要注意,此时右键“另存为”,文件类型选择下载的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。

你可能感兴趣的:(工具,javascript,ajax,jquery)