如何通過javascript設置content-disposition = attachment？

Question

如何通過javascript設置content-disposition = attachment ？

基本上，我想在使用Firefox通過Javascript加載頁面后強制執行“SaveAs”操作。

我怎樣才能做到這一點 ？

Answer 1

Content-Disposition是一個響應頭 ，即。 服務器必須返回它。 您無法通過客戶端javascript實現此目的。

Answer 2

Firefox和基於Chromium的瀏覽器支持download屬性 。 如果您現在需要更好的兼容性，請使用基於Flash的Downloadify作為后備。

---

僅限HTML：使用download屬性：

 <a download href="http://upload.wikimedia.org/wikipedia/commons/b/bb/Wikipedia_wordmark.svg">Download</a> 

---

僅限Javascript：您可以使用以下代碼保存任何文件：

 function saveAs(uri) { var link = document.createElement('a'); if (typeof link.download === 'string') { link.href = uri; link.setAttribute('download', true); //Firefox requires the link to be in the body document.body.appendChild(link); //simulate click link.click(); //remove the link when done document.body.removeChild(link); } else { window.open(uri); } } var file = 'http://upload.wikimedia.org/wikipedia/commons/b/bb/Wikipedia_wordmark.svg'; saveAs(file); 

Answer 3

1.使用Anchor“下載”（HTML5）屬性

<a href='abc.pdf' download>Click Here</a>

2.使用js以編程方式創建href，

const link = document.createElement('a');
link.href = '/xyz/abc.pdf';
link.download = "file.pdf";
link.dispatchEvent(new MouseEvent('click'));

根據Mozilla doc Anchor元素 ，下載屬性（HTML5）指示瀏覽器下載URL而不是導航到它。

重要筆記：

• 此屬性僅適用於同源URL。
• 雖然HTTP（s）URL需要位於同源，但是允許使用blob：URL和data：URL，以便可以下載JavaScript生成的內容，例如在圖像編輯器Web應用程序中創建的圖片。

所以上面的js方法動態創建錨元素並使用它下載文件只適用於相同的源文件，即有兩種方法可以解決這個問題 - >

• 客戶端
• 服務器端

客戶端解決方案： - >

解決這個問題的方法，在第二個注意事項中引用，即在fetch js API的幫助下可以使用blob對象

url = 'https://aws.something/abc.pdf';

fetch(url, {
      method: 'GET',
    }).then(function(resp) {
      return resp.blob();
    }).then(function(blob) {
      const newBlob = new Blob([blob], { type: "application/pdf", charset: "UTF-8" })

      // IE doesn't allow using a blob object directly as link href
      // instead it is necessary to use msSaveOrOpenBlob
      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(newBlob);
        return;
      }
      const data = window.URL.createObjectURL(newBlob);
      const link = document.createElement('a');
      link.dataType = "json";
      link.href = data;
      link.download = "file.pdf";
      link.dispatchEvent(new MouseEvent('click'));
      setTimeout(function () {
        // For Firefox it is necessary to delay revoking the ObjectURL
        window.URL.revokeObjectURL(data), 60
      });
    });

服務器端解決方案： - >

另一種選擇是，如果您可以控制服務器端響應頭，那么這可能是最佳選擇。

在常規HTTP響應中， Content-Disposition響應標頭是一個標頭，指示內容是否應在瀏覽器中內嵌顯示，即作為網頁或作為網頁的一部分顯示，還是作為附件顯示下載並保存在本地。 例如

Content-Disposition: attachment
Content-Disposition: attachment; filename="filename.jpg"

對於在AWS上托管的文件，可以編輯其響應標頭，可以在元數據中更改這些標頭，在文件中的元數據中添加內容處置標頭或文件夾屬性，將密鑰添加為內容配置和值作為附件，

content-disposition : attachment

現在無論何時從瀏覽器點擊這個文件，它總是會下載而不是打開，現在如果你在錨標簽中使用這個文件鏈接，它將直接使用download html標簽下載。