如何實現點擊<a>標簽導致http請求，不跳轉到新頁面？</a>

Question

我想制作一個下載鏈接。

這是我的HTML：

<a href="javascript:void(0)"><img src="../images/icons/word.png" alt="Word"></a>
<a href="javascript:void(0)"><img src="../images/icons/excel.png" alt="Excel"></a>
<a href="/download/test.ppt"><img src="../images/icons/ppt.png" alt="PPT"></a>
<a href="/download/test.pdf"><img src="../images/icons/pdf.png" alt="PDF"></a>

當我點擊<a>標簽時，我想執行一個http請求，而<a>標簽確實是這樣做的。 但它也跳到了新的頁面。 我不希望這種情況發生。

我搜索並找到了一些解決方案，例如設置<a> tag的href="#something" ，或者使用ajax。 但是，這些解決方案並不是我想要的。

我想知道有更好的解決方案嗎？ PS：我真的不想在這里使用ajax來實現這些。

Answer 1

您可以將目標設置為新選項卡。 在Chrome中，此選項卡會自動關閉。

<a href="/download/test.ppt" target="_blank"><img src="../images/icons/ppt.png" alt="PPT"></a>

Answer 2

HTML代碼是：

 <a href="../downloads/test.docx" target="_blank"><img src="../images/icons/ppt.png" alt="PPT"></a> 

我使用nodejs作為服務器，nodejs代碼是：

fs.stat(filepath, function(err, stats) {
    if (err)
        throw err;

    var stream = fs.createReadStream(filepath);
    response.setHeader('Content-Type', mime.lookup(filepath));
    response.setHeader('Content-Disposition', 'attachment;    filename=test.docx');
    response.writeHead(200);
    stream.pipe(response);
});