Asyncwebserver 如何发送内联 HTML 代码？答案

【问题标题】：Asyncwebserver how to send inline HTML code?Asyncwebserver 如何发送内联 HTML 代码？
【发布时间】：2021-06-26 05:16:19
【问题描述】：

尝试在没有“GET”请求的情况下使用 Asyncwebserver 运行内联 HTML 代码。

在 Windows 电脑上工作的 HTML 文件：

<!DOCTYPE html> 
<html>
<head>
<title>README</title>
</head>
<body>

<div><object data="c:\users\1234\Desktop\LOG06242021.TXT" width="100%" height="800"></object></div>

<br><h2><a href=http://10.0.0.100:8030/Weather >Home</a>

</body>
</html>

我的所有尝试都未能使其与 Asyncwebserver 一起使用。我有一个文件名（fn）的变量。文件名在 notFound 函数中提取，当前显示带有“request->send(SPIFFS, fn, String(), false)”的 LOG 文件。尝试使用内联 HTML 代码显示 LOG 文件并将超链接添加回 LOG 文件链接列表。日志文件每 24 小时创建一次；需要文件名变量的原因。

notFound 函数 --latest attemp 06/28:

void notFound(AsyncWebServerRequest *request)
{

  digitalWrite(online, HIGH);   //turn-on online LED indicator

  if (! request->url().endsWith(F(".TXT")))
  {
    request->send(404);
  }
  else
  {
    if (request->url().endsWith(F(".TXT")))
    {
      //.endsWith(F(".txt")))

      // here comes some mambo-jambo to extract the filename from request->url()
      int fnsstart = request->url().lastIndexOf('/');

      fn = request->url().substring(fnsstart);


      PATH = fn;

      accessLog();

      Serial.print("File:  ");
      Serial.println(fn);

      File webFile = SPIFFS.open(fn);

      Serial.print("File size: ");

      Serial.println(webFile.size());

      if (!webFile)
      {

        Serial.println("File:  " + fn + " failed to open");
        Serial.println("\n");

      }
      else if (webFile.size() == 0)
      {

        webFile.close();

      }
      else
      {

        /* 
        String resp = "<!DOCTYPE html><html><head><title>Observations</title></head><body>";
        resp += "<div><object type='text/html' data=";
        resp += fn;   //filename from root directory listing of SdBrowse page.
        resp += "width='100%' height='800'></object></div>";
        resp += "<br><h2><a href=http://10.0.0.100:8030/SdBrowse >SdBrowse</a></body></html>";
                          
        AsyncWebServerResponse *response = request->beginResponse(200, "text/html", resp);
        response->addHeader("Access-Control-Allow-Origin","*");
        request->send(response);
        */    //This only adds hyperlink; no display of text file

        //request->send(SPIFFS, fn, String(), true);  //Download file
        request->send(SPIFFS, fn, String(), false);  //Display file  <---- this works; text only
        
        webFile.close();          
        
      }

      fn = "";

      end();

    }    

  }

  digitalWrite(online, LOW);   //turn-off online LED indicator

}

Project web site

ESP32_Rain_Gauge Code

【问题讨论】：

String displayFile = ("http:\\10.0.0.100:8030" + fn); 我怀疑你想要一个反斜杠。也就是说，我真的不明白这个问题。
我也不明白你对response->printf() 的调用，它给出了第二个参数，它从未通过像%s 这样的格式指令使用过。我也不太明白这个问题。如果您能澄清您想要实现的目标以及实际发生的情况，这将有所帮助 - 实际输出而不是描述会更加清晰。
试图将链接添加到文本文件的底部。适用于 Windows pc 的工作 HTML 文件正是我想要完成的工作。我是一名 73 岁的 Asyncwebserver 新手；不知道如何完成任务。
编译没有错误，在网页底部生成url链接；但是，不显示任何文本。
我不确定项目网站链接的用途，但它在 Firefox 中没有响应。如果没有完整的代码，我将无法编译您的项目，也没有 ESP32，因此即使可以运行它也无法运行；充其量我不得不将它改编为 ESP8266。您可以尝试将问题迁移到 arduino.stackexchange.com。那里可能有更多的人关注并拥有 ESP32。但是为了测试他们仍然需要所有相关的代码。他们复制问题所需的代码越少越好。

标签： html arduino wifi esp32

【解决方案1】：

这是我用来添加标题、文本区域和超链接的代码：

“HTML6”：

const char HTML6[] PROGMEM = R"====(
<!DOCTYPE HTML>
<html>

<head>
    <title>Show</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.main
{
  type: text/txt;
  font-size:18px;
  width: auto;
  height: auto;
  margin: 30px;
}
</style>
</head>

<body>

    <h2>Observations
    <!-- <a href="/Show"><button>Show Log File</button></a> -->
    <br>
    <br>
    <div class="main" style="white-space: pre-wrap;" type="text/txt" id=file-content></div>
    <!-- <p style="white-space: pre-wrap;"id="file-content"></p>  -->
    <br>  
    <a href=http://%LINK%/SdBrowse >SdBrowse</a></h2><br>    
    
</body>
<script>  //JavaScript example by Sara Santos of [rnl.com/Forum][1]
  window.addEventListener('load', getFile);
  function getFile(){
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() 
    {
      if (this.readyState == 4 && this.status == 200) 
      {
        console.log(this.responseText);
        document.getElementById("file-content").innerHTML=this.responseText;
      }
    };
  xhr.open("GET", "/get-file", true);
  xhr.send();
}
</script>
</html>
)====";

Request "/Show " //加载 HTML6

serverAsync.on("/Show", HTTP_GET, [](AsyncWebServerRequest * request)
{

PATH = "/Show";
accessLog();

if (! flag == 1)
{
  
  request->send_P(200, PSTR("text/html"), HTML6, processor6);
  
}
end();
});

请求获取 HTML6 的文本文件：

serverAsync.on("/get-file", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, fn, "text/txt");
});

请求从“notFound”函数获取重定向：

serverAsync.on("/redirect/internal", HTTP_GET, [](AsyncWebServerRequest *request){
request->redirect("/Show"); //recevies HTML request to redirect
});

威廉

【讨论】：