如何提取HTML文件输入控件的文件并将内容写入PDF

问题分析 #

你的核心问题在于：file input控件的value属性只能获取浏览器为安全限制生成的虚拟文件路径，而非实际文件内容。要获取文件内容，必须通过FileReader API读取选中的文件对象。

修正后的代码 #

以下是解决文件内容无法写入PDF问题的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="huehue.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js"></script>
    <title>File Upload Example</title>
</head>
<body>
    <h1>文件上传示例</h1>
    <form id="myForm">
        <label for="name">姓名:</label><br>
        <input type="text" id="name" name="name" required><br>
        <label for="email">邮箱:</label><br>
        <input type="email" id="email" name="email" required><br><br>
        <input type="file" name="file" id="file">
        <button type="button" onclick="generatePDF()">下载PDF</button>
    </form>

    <script>
        function generatePDF() {
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const fileInput = document.getElementById('file');
            const file = fileInput.files[0];

            let contentHTML = `
                <p>姓名: ${name}</p>
                <p>邮箱: ${email}</p>
            `;

            if (file) {
                contentHTML += `
                    <p>文件名: ${file.name}</p>
                    <p>文件类型: ${file.type}</p>
                    <p>文件大小: ${(file.size / 1024).toFixed(2)} KB</p>
                `;

                // 仅读取文本类文件内容（如txt、csv等）
                if (file.type.startsWith('text/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        contentHTML += `<h3>文件内容:</h3><pre>${e.target.result}</pre>`;
                        generateAndSavePDF(contentHTML);
                    };
                    reader.readAsText(file);
                } else {
                    contentHTML += `<p>提示: 无法显示非文本文件内容</p>`;
                    generateAndSavePDF(contentHTML);
                }
            } else {
                contentHTML += `<p>未选择文件</p>`;
                generateAndSavePDF(contentHTML);
            }
        }

        function generateAndSavePDF(content) {
            const tempElement = document.createElement('div');
            tempElement.innerHTML = content;
            html2pdf().from(tempElement).save('用户数据.pdf');
        }
    </script>
</body>
</html>

关键改动说明 #

1. 移除无效嵌套表单：原代码中嵌套的<form>标签不符合HTML规范，已删除
2. 获取真实文件对象：通过fileInput.files[0]获取选中的File对象，而非仅读取虚拟路径
3. FileReader读取内容：使用FileReader API异步读取文本文件内容，确保能获取到实际内容
4. 区分文件类型处理：文本文件展示内容，非文本文件仅展示元信息（名称、类型、大小）
5. 修复模板字符串语法：修正原代码中模板字符串的拼接错误
6. 异步逻辑拆分：将PDF生成逻辑抽离为独立函数，适配文件读取的异步场景

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