基于JavaScript的HTML每周任务分配表格PDF导出求助

先修正你的HTML结构 #

现有HTML存在语法错误（比如<table>内部嵌套<body>、<tr>未闭合），会导致渲染和导出异常，调整为正确结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <link href="table.css" rel="stylesheet">
</head>
<body>
    <table id="timetable"></table>
    
    <button onclick="exportCSV()">导出CSV</button>
    <button onclick="exportPDF()">导出PDF</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.1.0/papaparse.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="table.js"></script>
</body>
</html>

方案1：用html2canvas + jsPDF导出可视化表格 #

完整保留页面样式（颜色、边框等），导出效果和页面显示完全一致：
在table.js中添加以下函数：

function exportPDF() {
    const timetable = document.getElementById('timetable');
    // 生成表格高清截图
    html2canvas(timetable, { scale: 2 }).then(canvas => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF('l', 'mm', 'a4'); // 'l'代表横向布局
        const pdfWidth = pdf.internal.pageSize.getWidth();
        const pdfHeight = (canvas.height * pdfWidth) / canvas.width;
        
        pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
        pdf.save('任务看板.pdf');
    });
}

方案2：用pdfmake生成结构化可编辑PDF表格 #

导出可编辑的原生PDF表格，需要手动匹配样式：
在table.js中添加以下函数：

function exportPDF() {
    const timetable = document.getElementById('timetable');
    const rows = timetable.querySelectorAll('tr');
    const pdfTableData = [];

    // 提取表头和表格数据
    rows.forEach(row => {
        const rowData = [];
        const cells = row.querySelectorAll('th, td');
        cells.forEach(cell => {
            const select = cell.querySelector('select');
            rowData.push(select ? select.value : cell.innerText);
        });
        pdfTableData.push(rowData);
    });

    // 定义PDF配置
    const docDefinition = {
        content: [
            {
                table: {
                    headerRows: 2, // 表格有两行表头
                    widths: ['auto', ...Array(21).fill('auto')], // 1个姓名列 + 7天×3时段=21列
                    body: pdfTableData
                },
                layout: 'lightHorizontalLines'
            }
        ],
        styles: {
            header: {
                fillColor: '#006699',
                color: 'white',
                bold: true,
                alignment: 'center'
            },
            evenRow: {
                fillColor: '#E6E6FA'
            }
        }
    };

    // 给偶数行添加背景色
    for (let i = 2; i < pdfTableData.length; i++) {
        if (i % 2 === 0) {
            pdfTableData[i].forEach((cellText, idx) => {
                pdfTableData[i][idx] = { 
                    text: cellText, 
                    style: 'evenRow',
                    alignment: 'center'
                };
            });
        }
    }

    // 导出PDF
    pdfMake.createPdf(docDefinition).download('任务看板.pdf');
}

两种方案对比 #

• 方案1：优点是完全还原页面样式，操作简单；缺点是导出的表格是图片，无法编辑。
• 方案2：优点是生成原生可编辑PDF表格；缺点是需要手动配置样式，适配成本略高。

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