JavaScript实现文件下载的14种方法总结大全

function downloadFile(url, fileName) {
  const link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
  link.click();
}

function downloadFile(url, fileName) {
  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = fileName;
      link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
      link.click();
    });
}

function downloadFile(url, fileName) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.onload = function() {
    const blob = xhr.response;
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = fileName;
    link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
    link.click();
  };
  xhr.send();
}

function downloadFile(url) {
  window.location.href = url;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/downloadjs/1.4.8/download.min.js"></script>

function downloadFile(url, fileName) {
  download(url, fileName);
}

<a href="path/to/file.pdf" rel="external nofollow"  download="myfile.pdf">Download</a>

function downloadFile(url) {
  fetch(url)
    .then(response => {
      const reader = response.body.getReader();
      const stream = new ReadableStream({
        start(controller) {
          function push() {
            reader.read().then(({ done, value }) => {
              if (done) {
                controller.close();
                return;
              }
              controller.enqueue(value);
              push();
            });
          }
          push();
        }
      });
      const blob = new Blob([stream], { type: response.headers.get('Content-Type') });
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = 'myfile.pdf';
      link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
      link.click();
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

function downloadFile(url, fileName) {
  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      saveAs(blob, fileName);
    });
}

function downloadFile(url) {
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  iframe.src = url;
  document.body.appendChild(iframe);
}

function downloadFile(data, fileName) {
  const blob = new Blob([data]);
  const url = URL.createObjectURL(blob);
  
  const link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
  link.click();
  
  URL.revokeObjectURL(url);
}

// 创建 WebRTC 连接和数据通道
const pc = new RTCPeerConnection();
const channel = pc.createDataChannel('fileTransfer');

// 监听数据通道的开启事件
channel.onopen = () => {
  console.log('Data channel opened');
  
  // 读取文件并发送数据
  readFileAndSendData();
};

// 读取文件并发送数据
function readFileAndSendData() {
  // 读取文件数据（假设文件数据已经准备好）
  const fileData = getFileData();
  
  // 将文件数据分割成数据包
  const chunkSize = 16384; // 每个数据包的大小
  const totalChunks = Math.ceil(fileData.byteLength / chunkSize);
  
  for (let i = 0; i < totalChunks; i++) {
    const start = i * chunkSize;
    const end = Math.min(start + chunkSize, fileData.byteLength);
    const chunk = fileData.slice(start, end);
    
    // 发送数据包
    channel.send(chunk);
  }
  
  // 发送完成后关闭数据通道和连接
  channel.close();
  pc.close();
}

// 发起 WebRTC 连接并与接收方建立连接
// 这里省略了与信令服务器的交互步骤

// 创建 WebRTC 连接
const pc = new RTCPeerConnection();

// 监听连接上的数据通道事件
pc.ondatachannel = event => {
  const channel = event.channel;
  
  channel.onmessage = event => {
    // 接收到数据包，保存到缓冲区
    const chunk = event.data;
    saveChunk(chunk);
  };
  
  channel.onclose = () => {
    console.log('Data channel closed');
    
    // 所有数据包接收完成后，组装文件并进行下载
    const fileData = assembleFileFromChunks();
    downloadFile(fileData);
  };
};

// 创建 WebRTC 连接并与发送方建立连接
// 这里省略了与信令服务器的交互步骤