Remix框架下HTML转PDF下载后页面全空白问题求助

你的问题核心是PDF页数随HTML内容长度变化但页面全空白，说明后端PDF生成工具已经识别到内容结构（页数匹配），但未正确渲染HTML内容，大概率是HTML传递/解析的编码错误，或PDF渲染缺少必要的HTML结构/样式，以下是针对性排查和修复步骤：

1. 修复HTML传递的编码问题 #

你当前用URLSearchParams封装HTML并以application/x-www-form-urlencoded格式发送，会自动转义<、>等特殊字符，若后端未正确解码，拿到的是转义后的字符串，PDF工具无法渲染内容。

调整方案：改用FormData直接传递 #

修改后端调用代码，避免URL编码干扰：

// 替换原URLSearchParams代码
const formData = new FormData();
formData.append('html', formDataHtml);

const response = await fetchApi(`/pdf/html2pdf`, {
    request,
    method: 'POST',
    // 移除手动设置的Content-Type，让浏览器自动处理multipart/form-data边界
    body: formData,
    shouldParseResponse: false,
    shouldStringifyBody: false,
});

同时确保后端从FormData中正确读取html参数（比如Node.js/Express需配合multer中间件处理multipart数据）。

2. 确保HTML是完整可渲染结构 #

多数PDF生成工具（如Puppeteer、wkhtmltopdf）需要完整的HTML文档结构，片段式HTML可能导致空白。测试时强制传递完整结构：

<html>
<head>
    <meta charset="UTF-8">
    <style>
        /* 兜底样式，避免无字体/透明内容问题 */
        body { font-family: Arial, sans-serif; color: #000; padding: 20px; }
    </style>
</head>
<body>
    <h1>测试PDF内容</h1>
    <p>这是一段验证文本</p>
</body>
</html>

3. 验证后端接收的HTML正确性 #

在/pdf/html2pdf接口中打印接收到的原始HTML，确认：

• 如果是转义后的字符串，说明后端解码逻辑有误，需调整参数解析方式；
• 如果是正确的HTML，直接用这段内容调用PDF生成工具做本地测试，确认工具本身能生成有内容的PDF。

4. 前端响应处理的正确性 #

检查useFetcher接收的fetcher.data是否为有效二进制数据：

• 确保fetchApi未将二进制流解析为字符串（你已设置shouldParseResponse: false，这部分没问题）；
• 调整下载逻辑，避免重复触发并确保Blob创建正确：

React.useEffect(() => {
    const response = fetcher.data;
    if (!response) return;

    const blob = new Blob([response], { type: 'application/pdf' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'protokol.pdf';
    a.click();
    URL.revokeObjectURL(url);
    // 清空数据避免重复下载
    fetcher.load('/');
}, [fetcher.data]);

5. 后端返回响应的正确性 #

确认后端生成的pdfUint8Array是有效PDF二进制：

• 在后端将其写入本地文件，检查是否能正常打开并显示内容；
• 确保Response的Content-Type和Content-Disposition头未被中间件篡改。

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