如何将包含外部CSS与JS的HTML模板发送至API生成PDF

由于API无法访问本地文件，最直接高效的方式是把外部CSS和JS内容嵌入到HTML的对应标签中，让HTML成为一个独立可解析的文件，再发送给API。以下是具体实现方案：

核心逻辑 #

• 读取HTML模板文件
• 读取/assets/子目录下的style.css和scripts.js内容
• 将CSS内容替换到HTML的<style>标签中，JS内容替换到<script>标签中（或直接插入对应位置）
• 把整合后的完整HTML发送至API

修改后的C#代码 #

private async Task TalkToPrintServerAsync()
{
    var appRoot = Path.GetDirectoryName(Assembly.GetExecutingAssembly().Location) 
                  ?? throw new SystemException("Could not find executing assembly root");
    var encoding = new UTF8Encoding();

    // 读取主HTML文件
    var htmlPath = Path.Combine(appRoot, "index.html");
    var htmlContent = await File.ReadAllTextAsync(htmlPath, encoding);

    // 读取CSS文件
    var cssPath = Path.Combine(appRoot, "assets", "style.css");
    var cssContent = await File.ReadAllTextAsync(cssPath, encoding);

    // 读取JS文件
    var jsPath = Path.Combine(appRoot, "assets", "scripts.js");
    var jsContent = await File.ReadAllTextAsync(jsPath, encoding);

    // 替换HTML中的外部引用为内嵌内容
    // 场景1：HTML中已有占位标签
    htmlContent = htmlContent.Replace("<style id=\"embedded-css\"></style>", 
                                      $"<style id=\"embedded-css\">{cssContent}</style>");
    htmlContent = htmlContent.Replace("<script id=\"embedded-js\"></script>", 
                                      $"<script id=\"embedded-js\">{jsContent}</script>");

    // 场景2：HTML使用外部链接引入（按需替换）
    // htmlContent = htmlContent.Replace("<link rel=\"stylesheet\" href=\"/assets/style.css\">", 
    //                                   $"<style>{cssContent}</style>");
    // htmlContent = htmlContent.Replace("<script src=\"/assets/scripts.js\"></script>", 
    //                                   $"<script>{jsContent}</script>");

    // 发送完整HTML到API
    using var client = new HttpClient();
    var payload = JsonConvert.SerializeObject(new { Html = htmlContent });
    var content = new StringContent(payload, Encoding.UTF8, "application/json");
    var result = await client.PostAsync("https://localhost:7160/PDF", content);

    // 可选：处理API响应
    if (result.IsSuccessStatusCode)
    {
        // 成功逻辑，比如保存返回的PDF文件
    }
    else
    {
        // 错误处理，比如记录日志或抛出异常
    }
}

关键注意点 #

• 优先使用异步文件读取方法（File.ReadAllTextAsync）提升IO性能
• 注意转义HTML中的特殊字符，避免破坏HTML结构（若CSS/JS包含特殊字符，可使用HttpUtility.HtmlEncode处理）
• 如果文件体积过大，可考虑分块读取或压缩后再发送，具体需结合API的接收能力

内容的提问来源于stack exchange，提问作者Steffen Skaraas