如何使用 JavaScript 调用下载 URL

Question

我正在使用 Unsplash API 创建照片下载应用。我可以调用照片并显示它，但是当尝试从 JSON (http://unsplash.com/photos/_Ajm-ewEC24/download?force=true) 调用下载链接时，我无法。

这是我当前用于在尝试下载链接调用时显示照片和标题的功能。我尝试使用 jQuery 的 .load 来调用 url，但这当然不起作用。

    const client_id = 'client_id=hiddenForSecurityReasons';

    const API = 'https://api.unsplash.com/';

    let randomPhoto = API + 'photos/random/?' + client_id;

    // Ajax Call

    $("#newRB").click(function() {
        $.getJSON(randomPhoto, function (response) {
        let randomPhotoPicture = response.urls.regular;
        let randomPhotoTitle = response.location;
        let download = response.links.download + "?force=true";


        document.getElementById('preview').src = randomPhotoPicture;
        document.getElementById('randomTitle').innerHTML = randomPhotoTitle;
        document.getElementById('downloadRB').load(download);
        })
    });

HTML：

<div class="row">
      <div class="col-12 col-sm-6">
        <!-- Card -->
        <article class="card animated fadeInLeft text-center">
          <img class="card-img-top img-responsive preview" id="preview" src="" />
          <div class="card-block">
            <h4 class="card-title" id="randomTitle"></h4>
            <button type="button" class="btn btn-outline-primary" id="newRB">New Background</button>
            <button type="button" class="btn btn-outline-primary" id="downloadRB">Download</button>
          </div>
        </article>
        <!-- .end Card -->
      </div>
    </div>

JSON 结果在这里，以防您好奇，但这无关紧要（控制台记录下载链接显示它有效）：

{
"id": "6y6D3S_sEjw",
"created_at": "2016-09-12T08:33:43-04:00",
"updated_at": "2017-05-13T21:56:20-04:00",
"width": 4500,
"height": 3000,
"color": "#919104",
"slug": null,
"downloads": 2835,
"likes": 64,
"views": 425961,
"liked_by_user": false,
"exif": {
"make": "Canon",
"model": "Canon EOS 6D",
"exposure_time": "25",
"aperture": "2.8",
"focal_length": "24",
"iso": 800
},
"location": {
"title": "Hovfjallet, Torsby, Sweden",
"name": "Hovfjallet",
"city": "Torsby",
"country": "Sweden",
"position": {
"latitude": 60.2928188177545,
"longitude": 12.9673533455078
}
},
"current_user_collections": [],
"urls": {
"raw": "https://images.unsplash.com/photo-1473683409080-b66239d1e547",
"full": "https://images.unsplash.com/photo-1473683409080-b66239d1e547?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=043cc47eeddbef09fc132b77f0bc9494",
"regular": "https://images.unsplash.com/photo-1473683409080-b66239d1e547?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=ac9893c66b73a7f91a8aa6dcf1ac7d6d",
"small": "https://images.unsplash.com/photo-1473683409080-b66239d1e547?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=6ac071858ad609f63b7c731ed70d936f",
"thumb": "https://images.unsplash.com/photo-1473683409080-b66239d1e547?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=22b3b68e25b0283afac75e6d56ad6d35"
},
"categories": [],
"links": {
"self": "https://api.unsplash.com/photos/6y6D3S_sEjw",
"html": "http://unsplash.com/photos/6y6D3S_sEjw",
"download": "http://unsplash.com/photos/6y6D3S_sEjw/download",
"download_location": "https://api.unsplash.com/photos/6y6D3S_sEjw/download"
}

Answer 1

试试这个...
我改编自this SO answer。

const client_id = 'client_id=hiddenForSecurityReasons';

const API = 'https://api.unsplash.com/';

let randomPhoto = API + 'photos/random/?' + client_id;

// Ajax Call

var link;

$("#newRB").click(function() {
    $.getJSON(randomPhoto, function (response) {
    let randomPhotoPicture = response.urls.regular;
    let randomPhotoTitle = response.location;
    let download = response.links.download + "?force=true";


    document.getElementById('preview').src = randomPhotoPicture;
    document.getElementById('randomTitle').innerHTML = randomPhotoTitle;
    //document.getElementById('downloadRB').load(download);

    // Create a link to be clicked by the download button
    link = document.createElement('a');
    link.href = download;
    link.download = 'Download.jpg';   // The file name suggestion for the user.
    document.body.appendChild(link);

    });
});

$("downloadRB").click(function(){
  link.click();
});