当点击按钮时，如何使用JavaScript更改文件名并下载文件

Question

我有一个用JavaScript创建的下载按钮，它链接到特定的文件。

var strDownloadButton = "<br/><INPUT type="button" value="Download" onclick="add()"/>"
window.location.href = "/images/image1.jpg";

在下载之前，我需要将文件 image1 重命名为 image2 ，因此我使用以下命令：

<a href="/images/image1.jpg" download="image2" >Download</a> 

问题在于有两个下载按钮被创建了（HTML5下载属性创建了另外一个）。

有没有办法使用由JavaScript创建的同一个按钮，并将其引用到下载属性中？

- Dhirendra Sengar

---

你的意思是想要将一个图片文件下载到本地驱动器吗？ - jhyap

是的，我能够下载图像文件，但是我想使用 JavaScript 按钮而不是再创建一个新按钮。 - Dhirendra Sengar

Answer 1

我不知道你在做什么，Brad Christie。

<a id="download" href="Chrysanthemum.jpg" download="image2" >Download</a>

document.getElementById("download").setAttribute("download", "image3")

在这里，您有一个要下载的元素，您获取该元素并更改其下载属性。

- user1234141515134321321513

---

与浏览器的兼容性 - Muneeb Mirza

Answer 2

我不确定这个方法能否完全奏效，但我曾经尝试使用JavaScript下载资源并重命名。然而，这意味着资源必须与页面在同一个域中，否则你将遇到跨域安全问题。另外，请不要介意我使用jQuery，但如果您需要去掉它，我可以让您了解如何进行跨浏览器的AJAX调用。

话虽如此：

<!-- your anchor decorated with data-saveas -->
<a href="/some/image.jpg" data-saveas="image2.jpg">Download</a>

<!-- wiring it up using jQuery/AJAX/Blob -->
<script type="text/javascript">
  // Helper to convert AJAX response in to a BLOB
  function dataToBlob(data, mimeString){
    // convert data to ArrayBuffer
    var buffer = new Int8Array(new ArrayBuffer(data.length));
    for (var i = 0; i < data.length; i++){
      buffer[i] = data.charCodeAt(i) & 0xff;
    }

    // https://dev59.com/2WUp5IYBdhLWcg3wZHAc#15302872
    try {
      return new Blob([buffer],{type:mimeString});
    } catch (e1) {
      try {
        var BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder;
        if (e.name == 'TypeError' && window.BlobBuilder){
          bb = new BlobBuilder();
          bb.append([buffer.buffer]);
          return bb.getBlob(mimeString);
        } else if (e.name == 'InvalidStateError'){
          return new Blob([buffer.buffer],{type:mimeString});
        }
      } catch (e2) {
      }
    }
    return null;
  }

  // iterate over all the items that are marked as saveas
  $('a[data-saveas]').each(function(){
    var $this = $(this);

    // Get the actual path and the destined name
    var target = $this.prop('href'),
        saveas = $this.data('saveas');

    // make an ajax call to retrieve the resource
    $.ajax({
      url: target,
      type: 'GET',
      mimeType: 'text/plain; charset=x-user-defined'
    }).done(function(data, textStatus, jqXHR){
      var mimeString = jqXHR.getResponseHeader('Content-Type'),
          blob = dataToBlob(data, mimeString);
      if (blob){
        // now modfy the anchor to use the blob instead of the default href
        var filename = saveas,
            href = (window.webkitURL || window.URL).createObjectURL(blob);
        $this.prop({
          'download': saveas,
          'href': href,
          'draggable': true
        }).data({
          'downloadurl': [mimeString, filename, href].join(':')
        });
      }
    });
  });
</script>

尚未测试，但应该可以工作。基本上，您可以使用jQuery获取资源并将其存储到具有指定名称的blob中。如果能够这样做，则链接现在变成了一个具有提供的名称的自定义命名blob资源。如果无法这样做，则保留默认功能，用户需要自己命名。

- Brad Christie

---

谢谢你的回答。为什么要使用 data.charCodeAt(i) & 0xFF？你已经创建了 Int8Array，我认为你放入这个数组中的任何内容都将是 8 位。而且我不明白为什么要将流放入 Int8Array 中，这样不会丢失数据吗？ - uzay95