前端使用XMLHttpRequest实现通过链接下载文件

最新推荐文章于 2024-06-04 17:42:21 发布

原创

最新推荐文章于 2024-06-04 17:42:21 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#XMLHttpRequest #Ajax #文件下载 #跨域 #前端

本文介绍了如何在前端利用XMLHttpRequest技术实现从指定链接下载图片，涵盖了Ajax请求、跨域处理等关键步骤，旨在帮助开发者掌握前端文件下载的方法。

前端使用XMLHttpRequest实现通过链接下载图片

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="button" value="test" onclick="test()">
  
  <script>
    const fileInfo = {
      url: 'https://res.hc-cdn.com/cnpm-common-resource/2.0.2/base/header/components/images/logo.png',
      name: 'a.png'
    }
    function test() {
      downloadUrlFile(fileInfo.url)
    }
    function downloadUrlFile(url) {
      const xhr = new XMLHttpRequest()
      xhr.open('GET', url, true)
      xhr.responseType = 'blob'
      xhr.onload = () => {
        if (xhr.status === 200) {
          saveAs(xhr.response, fileInfo.name)
        }
      }
      xhr.send()
    }
    function saveAs(data, name) {
        var urlObject = window.URL || window.webkitURL || window;