在前端开发中，下载文件功能是很常见的需求。wdt-download 是一个简单易用的 NPM 包，可以帮助我们快速实现文件下载功能。
安装和引入
使用 npm 安装 wdt-download：
npm install wdt-download --save
在需要使用的文件中引入 wdt-download：
import wdtDownload from 'wdt-download';
基本应用
下面以下载图片为例，演示 wdt-download 的基本使用方法。
首先，我们需要在页面中放置一个按钮，用于触发文件下载操作：
<button id="download-btn">下载图片</button>
然后，在 JavaScript 中，我们需要为按钮注册一个点击事件，并在事件处理程序中调用 wdt-download 的 download 方法：
document.getElementById('download-btn').addEventListener('click', function () {
wdtDownload.download('http://example.com/image.jpg', 'image.jpg');
});wdtDownload.download 方法接受两个参数，第一个参数是要下载的文件的 URL，第二个参数是保存在本地的文件名。上述代码会在用户点击 “下载图片” 按钮后，将指定 URL 的图片下载到本地，并保存为 image.jpg。
支持导出的文件类型
wdt-download 支持下载各种类型的文件，包括但不限于：
- 图片格式（jpg、png、gif 等）
- 文本文件（txt、json 等）
- 压缩文件（zip、rar 等）
下载进度的实时更新
wdt-download 提供了一个 onProgress 选项，可以在下载过程中实现进度条的实时更新。
代码如下：
wdtDownload.download('http://example.com/image.jpg', 'image.jpg', {
onProgress: function (percentage, downloadedBytes, totalBytes) {
console.log('已下载 ' + downloadedBytes + ' 字节，共 ' + totalBytes + ' 字节，已完成 ' + percentage + '%');
}
});其他参数选项
wdt-download 还提供了其他参数选项，可以帮助我们更好地控制下载行为。
- timeout：设置下载超时时间
- headers：设置自定义请求头
- responseType：设置响应类型
wdtDownload.download('http://example.com/image.jpg', 'image.jpg', {
timeout: 5000, // 设置下载超时时间为 5 秒
headers: { 'Authorization': 'Token xxxxxxx' }, // 设置自定义请求头
responseType: 'blob' // 设置响应类型为 Blob
});结语
wdt-download 是一个轻量级的 NPM 包，可以方便地实现前端文件下载功能。我们可以根据自己的需求，通过参数选项灵活地控制下载行为。希望这篇文章能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572d881e8991b448e90ee