[英]How to trigger a file download when clicking an HTML button or JavaScript
這太瘋狂了，但我不知道該怎么做，而且由於這些詞很常見，很難在搜索引擎上找到我需要的東西。 我認為這應該是一個容易回答的問題。
我想要一個簡單的文件下載，與此相同：
<a href="file.doc">Download!</a>
但我想使用 HTML 按鈕，例如以下任一按鈕：
<input type="button" value="Download!">
<button>Download!</button>
同樣，是否可以通過 JavaScript 觸發簡單的下載？
$("#fileRequest").click(function(){ /* code to download? */ });
我絕對不是在尋找一種方法來創建看起來像按鈕的錨點，使用任何后端腳本，或者弄亂服務器標頭或 mime 類型。
對於按鈕，你可以做
<form method="get" action="file.doc">
<button type="submit">Download!</button>
</form>
HTML：
<button type="submit" onclick="window.open('file.doc')">Download!</button>
使用 jQuery：
$("#fileRequest").click(function() {
// hope the server sets Content-Disposition: attachment!
window.location = 'file.doc';
});
一個簡單的JS解決方案：
function download(url) {
const a = document.createElement('a')
a.href = url
a.download = url.split('/').pop()
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
}
你可以用隱形 iframe 的“技巧”來做到這一點。 當您將“src”設置為它時，瀏覽器的反應就像您單擊具有相同“href”的鏈接一樣。 與表單解決方案相反，它使您能夠嵌入額外的邏輯，例如在超時后激活下載，滿足某些條件等。
它也非常安靜，沒有像使用window.open那樣閃爍的新窗口/標簽。
HTML：
<iframe id="invisible" style="display:none;"></iframe>
Javascript：
function download() {
var iframe = document.getElementById('invisible');
iframe.src = "file.doc";
}
引導版本
<a class="btn btn-danger" role="button" href="path_to_file"
download="proposed_file_name">
Download
</a>
記錄在 Bootstrap 4 文檔中，也適用於 Bootstrap 3。
我認為這是您正在尋找的解決方案
<button type="submit" onclick="window.location.href='file.doc'">Download!</button>
我有一個案例，我的 Javascript 生成了一個 CSV 文件。 由於沒有遠程 URL 來下載它，我使用以下實現。
downloadCSV: function(data){
var MIME_TYPE = "text/csv";
var blob = new Blob([data], {type: MIME_TYPE});
window.location.href = window.URL.createObjectURL(blob);
}
您可以隱藏下載鏈接並使按鈕單擊它。
<button onclick="document.getElementById('link').click()">Download!</button>
<a id="link" href="file.doc" download hidden></a>
關於什么：
<input type="button" value="Download Now!" onclick="window.location = 'file.doc';">
如果您正在尋找一個 vanilla JavaScript（無 jQuery）解決方案並且不使用 HTML5 屬性，您可以嘗試這個。
const download = document.getElementById("fileRequest"); download.addEventListener('click', request); function request() { window.location = 'document.docx'; }
.dwnld-cta { border-radius: 15px 15px; width: 100px; line-height: 22px }
<h1>Download File</h1> <button id="fileRequest" class="dwnld-cta">Download</button>
這最終對我有用，因為要下載的文件是在加載頁面時確定的。
JS 更新表單的 action 屬性：
function setFormAction() {
document.getElementById("myDownloadButtonForm").action = //some code to get the filename;
}
調用 JS 更新表單的 action 屬性：
<body onLoad="setFormAction();">
帶有提交按鈕的表單標簽：
<form method="get" id="myDownloadButtonForm" action="">
Click to open document:
<button type="submit">Open Document</button>
</form>
以下沒有工作：
<form method="get" id="myDownloadButtonForm" action="javascript:someFunctionToReturnFileName();">
在<body>和</body>標簽之間的任何地方，使用以下代碼放入一個按鈕：
<button>
<a href="file.doc" download>Click to Download!</a>
</button>
這肯定有效！
如果您不能使用表單，則使用downloadjs 的另一種方法很適合。 Downloadjs 在后台使用 blob 和 html 5 文件 API：
<div onClick=(()=>{downloadjs(url, filename)})/>
*它是 jsx/react 語法，但可以在純 html 中使用
在我的原始答案中，我提供了一個不再起作用的解決方法：如果要下載的文件不在同一台服務器上，則屬性下載不起作用。 問題是屬性下載僅在要下載的文件位於選項卡的同一服務器上時才有效。 其他人也遇到了這個問題，這個問題在Chrome 下載屬性不工作中得到了廣泛的介紹。
原答案：
加載文件和下載文件是有區別的。 以下 html 代碼加載一個文件：
<a href="http://www.fbi.gov/top-secret.pdf">loading on the same tab</a>
單擊此鏈接后，您當前的選項卡將替換為可以下載的 pdf 文件。 右鍵單擊該鏈接，您可以選擇菜單項保存鏈接，直接下載文件。 如果您希望在單擊此類鏈接時獲得另存為對話框，您可能需要使用以下代碼：
<a href="http://www.fbi.gov/top-secret.pdf?download=1">save as...</a>
如果您在選項中選擇使用下載目錄，您的瀏覽器將立即下載此文件。 否則，您的瀏覽器將提供另存為對話框。
您還可以選擇一個按鈕進行下載：
<button type="submit" onclick="window.open('http://www.fbi.gov/top-secret.pdf?download=1')">
save as...
</button>
如果您希望在新選項卡上加載鏈接，您可以
<a href="http://www.fbi.gov/top-secret.pdf" target="_blank">loading on a new tab</a>
表單元素不注意指令?download=1 。 它只注意指令target="_blank" ：
<form method="get" action="http://www.fbi.gov/top-secret.pdf" target="_blank">
<button type="submit">loading on a new tab</button>
</form>
您好，我只包含“下載”這個詞並且效果很好。
<a href="file.pdf" download>Download</a>
因此，在 javascript 中，您可以使用以下內容：
function onStartedDownload(id) {
console.log(`Started downloading: ${id}`);
}
function onFailed(error) {
console.log(`Download failed: ${error}`);
}
var downloadUrl = "https://example.org/image.png";
var downloading = browser.downloads.download({
url : downloadUrl,
filename : 'my-image-again.png',
conflictAction : 'uniquify'
});
downloading.then(onStartedDownload, onFailed);
這太瘋狂了，但是我不知道該怎么做，而且由於這些單詞很常見，因此很難在搜索引擎上找到我需要的東西。 我認為這應該很容易回答。
我想要一個簡單的文件下載，該操作與此相同：
<a href="file.doc">Download!</a>
但是我想使用HTML按鈕，例如以下任一按鈕：
<input type="button" value="Download!">
<button>Download!</button>
同樣，是否可以通過JavaScript觸發簡單下載？
$("#fileRequest").click(function(){ /* code to download? */ });
我絕對不是在尋找一種創建類似於按鈕的錨，使用任何后端腳本或與服務器標頭或mime類型混淆的方法。
<a href="file.doc"><button>Download!</button></a>
按鈕和text-decoration的最簡單方法之一將有助於更改或刪除鏈接的文本裝飾。
在我的測試中，只要您使用相對鏈接，以下內容適用於所有文件類型和瀏覽器：
<a href="/assets/hello.txt" download="my_file.txt"><button>Download 2</button></a>
/assets/hello.txt只是我網站上的相對路徑。 將其更改為您自己的相對路徑。my_file.txt是您希望文件在下載時調用的名稱。我注意到很多答案下都有評論說瀏覽器只會嘗試打開文件本身而不是根據文件類型下載它。 我發現這是真的。
我制作了兩個按鈕來使用兩種不同的方法對其進行測試：
<button onclick="window.location.href='/assets/hello.txt';">Download 1</button>
<a href="/assets/hello.txt" download="my_file.txt"><button>Download 2</button></a>
注意事項：
我在 Firefox、Safari 和 Chrome 上對此進行了測試。
不是對原始問題的真正答案，但它可能會幫助與我面臨類似情況的其他人。
如果您要下載的文件不在同一來源上托管，但您希望能夠下載它，則可以使用Content-Disposition 標頭來實現。 確保服務器在響應文件請求時包含標頭。
設置一個像Content-Disposition: attachment這樣的值將確保文件將被下載而不是在瀏覽器中查看。
在這種情況下，一個簡單的<a href="http://www.notMyOrigin.com/file.txt">Download</a>指向您的文件就可以下載它。
如果你想
<a href="path_to_file" download="proposed_file_name">Download</a>
為了能夠下載將由瀏覽器呈現的文件，但仍然希望在按鈕中使用簡潔的 javascript 函數； 您可以在 html 中有一個不可見的鏈接，然后在 javascript 中單擊它。
function download_file() { document.getElementById("my_download").click() }
<a id="my_download" href="path_to_file" download="file_name" style="display:none;"></a> <button onClick="download_file()">Download!!!</button>
您需要做的就是在您輸入的文件名之后添加下載：
前：
<a href="file.doc">Download!</a>
后
<a href="file.doc" Download >Download!</a>
確保下載用大寫字母書寫，否則將無法正常工作。
對於那里的反應用戶，我認為這是 go 關於它的一種非常干凈的方法：
import React, {useRef} from 'react';
const DlButton = ({link}) => {
const dlRef = useRef();
const dlHandler = () => dlRef.current.click();
return (
<div>
<button type="button" onClick={dlHandler}>
Download File
</button>
<a href={link} ref={dlRef}/>
</div>
);
}
基本上，您創建一個沒有內容的鏈接（用戶不會查看）。 然后，當用戶單擊按鈕時，您只需單擊該鏈接。
如果您有一個復雜的 URL，例如file.doc?foo=bar&jon=doe另一種方法是在表單中添加隱藏字段
<form method="get" action="file.doc">
<input type="hidden" name="foo" value="bar" />
<input type="hidden" name="john" value="doe" />
<button type="submit">Download Now</button>
</form>
靈感來自不完整的@Cfreak 答案
我想出的解決方案是您可以在錨標記中使用下載屬性，但只有當您的 html 文件在服務器上時它才有效。 但是您可能會遇到這樣的問題，例如在設計一個簡單的 html 頁面時，我們如何檢查您是否可以使用 VS 代碼實時服務器或支架實時服務器，您將看到您的下載屬性將起作用，但是如果您嘗試通過以下方式打開它只需雙擊 html 頁面即可打開文件而不是下載文件。 結論：錨標記中的屬性下載僅在您的 html 文件不是服務器時才有效。
這太瘋狂了，但是我不知道該怎么做，而且由於這些單詞很常見，因此很難在搜索引擎上找到我需要的東西。 我認為這應該很容易回答。
我想要一個簡單的文件下載，該操作與此相同：
<a href="file.doc">Download!</a>
但是我想使用HTML按鈕，例如以下任一按鈕：
<input type="button" value="Download!">
<button>Download!</button>
同樣，是否可以通過JavaScript觸發簡單下載？
$("#fileRequest").click(function(){ /* code to download? */ });
我絕對不是在尋找一種創建類似於按鈕的錨，使用任何后端腳本或與服務器標頭或mime類型混淆的方法。
你可以簡單地使用：
<form action="/file.doc" align="center"> <input type="submit" id="custom-buttons" value="Click Here To Download" /> </form>
對我來說，廣告按鈕而不是錨文本效果很好。
<a href="file.doc"><button>Download!</button></a>
根據大多數規則，這可能不太好，但看起來不錯。
如果您使用<a>標記，請不要忘記使用通向該文件的整個 url -- 即：
<a href="http://www.example.com/folder1/file.doc">Download</a>
單擊按鈕而不是打開新選項卡（HTML 或 JavaScript）時如何觸發文件下載
[英]How to trigger a file download when clicking an button instead opening a new tab (HTML or JavaScript)
單擊 HTML 按鈕時如何觸發帶有文本區域內容的文件下載
[英]How to trigger a file download with text area content when clicking an HTML button
<a>在現代瀏覽器中</a>單擊html <a>標記或javascript</a>時如何觸發文件下載
[英]How to trigger a file download when clicking an html <a> tag or javascript in a modern browser
單擊 HTML 鏈接<a>到其他網站</a>時如何觸發文件下載
[英]How to trigger a file download when clicking an HTML Link <a> to other website
單擊 html 中的按鈕后，如何從 javascript function 寫入文件
[英]How to write to a file from a javascript function after clicking on a button in html
如何在使用JavaScript單擊按鈕時更改文件名並下載
[英]How to change a file name and download it when a button is clicked using JavaScript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.