如何使用JavaScript單擊按鈕時更改文件名並將其下載

我有一個使用JavaScript創建的鏈接到特定文件的下載按鈕。如何使用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>

的問題是，有創建2個下載按鈕（HTML5下載屬性創建1以上）。

有什麼辦法可以使用JavaScript創建的相同按鈕，並引用下載屬性？

來源

2014-05-22 Dhirendra Sengar

你的意思是你想下載一個映像文件到本地驅動器？ – jhyap

是的。和我能夠下載圖像文件，但只有我想要推薦的JavaScript按鈕，而不是再次創建新的按鈕.. –

我不是100％確定它會工作，但是我之前做過類似的事情來下載資源並使用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; 
    } 

    // http://stackoverflow.com/a/15302872/298053 
    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資源。如果它不能保留默認功能，並且用戶需要爲其自己命名。

來源

2014-05-22 13:14:56

感謝您的答案。你爲什麼使用'data.charCodeAt（i）＆0xFF'？你已經創建了Int8Array，我認爲你放入這個數組的時候是8位的。而且我也沒有明白你爲什麼要把數據流插入Int8Array，並且不會丟失數據？ – uzay95

我不知道你在做什麼布拉德·克里斯蒂，

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

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

在這裏，你必須要下載一個元素，你得到的元素並改變其屬性下載。

來源

2016-01-08 15:00:35 user1234141515134321321513

[Compatibility]（http://stackoverflow.com/questions/24504828/downloading-file-custom-name-with-jquery#comment-38080450）與瀏覽器 –

如何使用JavaScript單擊按鈕時更改文件名並將其下載

回答

相關問題