如何在網頁上添加機制以將 html 文件下載到他們的移動設備？（鏈接打開頁面而不是下載 html 文件）

Question

我有一個要離線使用的 html 文件。 只需右鍵單擊桌面瀏覽器上的鏈接，然后選擇“另存為”即可輕松實現。

但是，在移動設備上，我嘗試使用錨標簽上的下載屬性，如下所示：

<a href="index.html" download>Download the page here.</a>

這似乎只是將我帶到頁面而不是下載它。

我的主要目標只是允許用戶將 html 文件下載到他們的移動設備上。

確實沒有右鍵單擊移動設備並按住鏈接會顯示菜單，但下載不在其中。 移動瀏覽器本身可能有一個打開頁面后保存頁面的機制，但這有點難以引導用戶完成，當然我不知道用戶使用的是什么移動瀏覽器。

這里特別注意，我要下載的網頁沒有需要加載的圖像或樣式腳本文件等資產，所有資產都包含在 html 文件本身中。

我實際上想出了一個解決問題的方法，所以我會在這里分享，但我發現很難相信沒有更簡單的方法可以做到這一點。

我的解決方案本質上是這樣的，對 html 文件發出異步請求並將其文本作為字符串讀取。 然后使用該字符串制作一個文本 blob 並下載它。 此外，為了確保可以從本地計算機獲取資產，我使用包含標頭的 php 文件提供數據以忽略跨源限制。 （我沒有使用 fetch 因為我想使用 settimeout）。

從位置https://www.mypage.com/請求index.html文件：

這是位於基本目錄中的downloader.php文件：

header('Access-Control-Allow-Origin: *');
?>
<?php include_once 'index.html';?>

用戶點擊的html文件：

<!DOCTYPE html>
<html>
<body>
<button onclick="downloadPageAsText('https://www.mypage.com/downloader.php', 'index', '.html');">Download</button>
</body>
</html>

允許下載的功能：

function downloadPageAsText(url, basename, suffix){
    let xhttp = new XMLHttpRequest();
    xhttp.timeout = 1000;
    xhttp.ontimeout = function(e) {
        alert("Request timed out.  Try again later");
    };
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
           saveStringToTextFile(xhttp.responseText, basename, suffix);
        }
    };
    xhttp.open("GET", url, true);
    xhttp.send();
    }

function saveStringToTextFile(str1, basename = "myfile", fileType = ".txt") {
    let filename = basename + fileType;
    let blobVersionOfText = new Blob([str1], {
        type: "text/plain"
    });
    let urlToBlob = window.URL.createObjectURL(blobVersionOfText);
    let downloadLink = document.createElement("a");
    downloadLink.style.display = "none";
    downloadLink.download = filename;
    downloadLink.href = urlToBlob;
    document.body.appendChild(downloadLink);
    downloadLink.click();
    downloadLink.parentElement.removeChild(downloadLink);
}

有沒有更簡單的方法可以讓用戶將 html 文件下載到他們的移動設備上？

Answer 1

在評論幫助后，我發現在 PHP 文件中添加 Content-Disposition 標頭會提示移動瀏覽器使用其下載機制。

看起來有兩種相對簡單的方法可以使 html 文件下載。

您可以使用錨標記的下載屬性，該屬性應該提示瀏覽器下載文件而不是顯示它。 以下是它的使用示例：

<a href="desiredpage.html" download="suggestedname.html">Click to download</a>

但是，這僅適用於同源 URL，因此盡管它可能適合您的用例但不適合我的用例，因為我需要從跨源 URL 下載文件。

讓 html 文件下載而不是顯示（使用 PHP）的第二種更簡單的方法是使用Content-Dispostion 標頭，它告訴用戶瀏覽器它應該下載文件。

下面是一個名為download.php的 PHP 文件的示例，它會使用來自客戶端的錨標記來使用建議的名稱desiredpage.html下載suggestname.html 。

<?php
$contents=file_get_contents("desiredpage.html");
$filename="suggestedname.html";
header('Access-Control-Allow-Origin: *');
header("Content-disposition:attachment;filename=".$filename);
echo $contents;
?>

這是客戶端的錨標記：

<a href="download.php">Click here to download</a>

參考：下載鏈接在 html 中不起作用

來自Anirban和Christopher的有用評論。

如何在網頁上添加機制以將 html 文件下載到他們的移動設備？（鏈接打開頁面而不是下載 html 文件）

問題描述

1 個解決方案

解決方案1
1 2022-07-11 17:01:03

如何在網頁上添加機制以將 html 文件下載到他們的移動設備？ （鏈接打開頁面而不是下載 html 文件）

問題描述

1 個解決方案

解決方案1 1 2022-07-11 17:01:03

如何在網頁上添加機制以將 html 文件下載到他們的移動設備？（鏈接打開頁面而不是下載 html 文件）

解決方案1
1 2022-07-11 17:01:03