Question

我现在正在使用网站的下载按钮，但是当我向下载链接中添加模板文字时，此下载功能将无法正常工作：

NAME                           READY   STATUS         RESTARTS   AGE
hello-world-7d87b8ddd5-gqr8k   1/1     Running        1          2d22h
hello-world-dev                0/1     ErrImagePull   0          6s

const logoData = [

  {
    name: "Arizona Cardinals",
    png: "https://raw.githubusercontent.com/moose1645/SLV/master/logos/NFL/png/500/ARI.png",
  },
  {
    name: "Atlanta Falcons",
    png: "https://raw.githubusercontent.com/moose1645/SLV/master/logos/NFL/png/500/ATL.png",
  }

];


function logoTemplate(logo) {

  return `
  <div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">${logo.name}</h5>
    <a type="button" class="btn btn-primary" onclick="downloadIt()" href="#">Download PNG</a>
  </div>
</div>
`

}


function downloadIt() {
  function forceDownload(blob, filename) {
    var a = document.createElement('a');
    a.download = filename;
    a.href = blob;

    document.body.appendChild(a);
    a.click();
    a.remove();
  }

  function downloadResource(url, filename) {
    if (!filename) filename = url.split('\\').pop().split('/').pop();
    fetch(url, {
        headers: new Headers({
          'Origin': location.origin
        }),
        mode: 'cors'
      })
      .then(response => response.blob())
      .then(blob => {
        let blobUrl = window.URL.createObjectURL(blob);
        forceDownload(blobUrl, filename);
      })
      .catch(e => console.error(e));
  }

  downloadResource(`${logo.png}`);
}


document.getElementById("library").innerHTML = `
<div class="container">
${logoData.map(logoTemplate).join('')}
</div>
`

当我对以下内容进行硬编码时，下载功能将起作用：<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div id="library"> </div> 但我希望文件根据其下的对象进行更改。

我想要第一个按钮下载此文件：https://raw.githubusercontent.com/moose1645/SLV/master/logos/NFL/png/500/ARI.png

，我希望第二个按钮下载此文件：https://raw.githubusercontent.com/moose1645/SLV/master/logos/NFL/png/500/ATL.png

基本上，我只希望每个对象都有一个按钮，单击该按钮即可自动从该数据下载downloadResource('https://raw.githubusercontent.com/moose1645/SLV/master/logos/NFL/png/500/ARI.png')值

png

。

相反，我得到了错误。任何建议将不胜感激，在此先感谢。

如何创建下载功能，文件根据其所在的对象而变化

0 个答案: