博客

如何使用JavaScript/jQuery下载文件

  • Post category:jquery
  1. 使用JavaScript下载文件

使用JavaScript实现文件下载主要有两种方法，一种是使用a标签的download属性，另一种是使用XMLHttpRequest对象。

1.1 使用a标签的download属性

<a href="path/to/file.pdf" download="file.pdf">下载文件</a>

上面代码中，href属性指定要下载的文件路径，download属性指定文件名，如果文件路径中含有中文字符，需要使用encodeURI()或encodeURIComponent()函数进行编码。

1.2 使用XMLHttpRequest对象

function downloadFile(url) {
  let xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob';
  xhr.onload = function() {
    if (xhr.status === 200) {
      let blob = new Blob([xhr.response], {type: 'application/octet-stream'});
      let url = URL.createObjectURL(blob);
      let a = document.createElement('a');
      a.href = url;
      a.download = 'file.pdf'; // 文件名
      a.click();
      URL.revokeObjectURL(url);
    }
  };
  xhr.onerror = function() {
    console.log('下载文件出错');
  };
  xhr.send();
}

上面代码中，首先创建一个XMLHttpRequest对象，然后将responseType属性设置为blob，这样返回的数据类型就是二进制数据，而不是文本数据。在接收到响应后，将响应体转换为blob对象，然后创建一个URL对象，该对象代表着一个指定的文件对象或者文件内容。接着创建一个a标签，将URL对象的地址赋值给a标签的href属性，将文件名赋值给download属性，使用click()方法模拟用户点击a标签的操作。最后调用URL.revokeObjectURL()方法释放URL对象占用的内存。

  1. 使用jQuery下载文件

使用jQuery下载文件也有两种方法，一种是使用a标签的download属性，另一种是使用jQuery的ajax方法。

2.1 使用a标签的download属性

<a href="path/to/file.pdf" download="file.pdf">下载文件</a>

上面代码同JavaScript实现方式，因为a标签是HTML标准元素，因此代码是可以直接使用的。

2.2 使用jQuery的ajax方法

function downloadFile(url) {
  $.ajax({
    url: url,
    method: 'GET',
    xhrFields: {
      responseType: 'blob'
    },
    success: function(data, status, xhr) {
      if (xhr.status === 200) {
        let blob = new Blob([data], {type: 'application/octet-stream'});
        let url = URL.createObjectURL(blob);
        let a = document.createElement('a');
        a.href = url;
        a.download = 'file.pdf'; // 文件名
        a.click();
        URL.revokeObjectURL(url);
      }
    },
    error: function(xhr, status, error) {
      console.log('下载文件出错');
    }
  });
}

上面代码中，使用jQuery的ajax方法，将responseType属性设置为blob，将返回的数据类型设置为二进制数据。在成功接收到响应数据后，使用同JavaScript方法一样的方式进行处理，转换为blob对象，然后创建URL对象，创建a标签，下载文件，并释放URL对象占用的内存。

以上就是使用JavaScript/jQuery下载文件的完整攻略，你可以根据实际情况选择其中一种方法进行实现。

Tags: