js实现下载按钮

实现下载按钮的JavaScript方法

使用<a>标签的download属性结合JavaScript动态生成下载链接：

const downloadButton = document.getElementById('downloadBtn');
downloadButton.addEventListener('click', () => {
  const link = document.createElement('a');
  link.href = 'path/to/file.pdf'; // 替换为实际文件路径
  link.download = 'filename.pdf'; // 设置下载文件名
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
});

使用Blob对象下载动态内容

当需要下载动态生成的内容时，可以使用Blob对象：

function downloadText() {
  const content = '这是要下载的文本内容';
  const blob = new Blob([content], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);

  const a = document.createElement('a');
  a.href = url;
  a.download = 'example.txt';
  a.click();

  URL.revokeObjectURL(url);
}

下载远程服务器文件

对于跨域文件下载，可能需要后端配合或使用fetch API：

async function downloadRemoteFile() {
  try {
    const response = await fetch('https://example.com/file.pdf');
    const blob = await response.blob();
    const url = window.URL.createObjectURL(blob);

    const a = document.createElement('a');
    a.href = url;
    a.download = 'remote-file.pdf';
    document.body.appendChild(a);
    a.click();
    a.remove();

    window.URL.revokeObjectURL(url);
  } catch (error) {
    console.error('下载失败:', error);
  }
}

添加下载进度提示

对于大文件下载，可以添加进度提示：

function downloadWithProgress(url, filename) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob';

  xhr.onprogress = function(event) {
    if (event.lengthComputable) {
      const percent = (event.loaded / event.total) * 100;
      console.log(`下载进度: ${percent.toFixed(2)}%`);
    }
  };

  xhr.onload = function() {
    if (this.status === 200) {
      const blob = this.response;
      const downloadUrl = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = downloadUrl;
      a.download = filename;
      a.click();
      URL.revokeObjectURL(downloadUrl);
    }
  };

  xhr.send();
}

兼容性处理

考虑旧浏览器的兼容性方案：

function downloadFileFallback(url, filename) {
  if (window.navigator.msSaveBlob) { // IE专用方法
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onload = function() {
      window.navigator.msSaveBlob(xhr.response, filename);
    };
    xhr.send();
  } else {
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }
}

HTML按钮示例

对应的HTML按钮代码：

<button id="downloadBtn">下载文件</button>
<button onclick="downloadText()">下载文本</button>
<button onclick="downloadRemoteFile()">下载远程文件</button>

这些方法涵盖了从简单到复杂的各种下载场景，可以根据实际需求选择适合的实现方式。