Moodle3.6.2中如何通过JS按钮打印所有同class的div内容

问题根源 #

• HTML规范要求ID全局唯一，getElementById 设计上只会返回页面中第一个匹配ID的元素，这是符合标准的正常表现
• getElementsByClassName 返回的是类数组格式的HTMLCollection集合，无法直接调用单个DOM元素的outerHTML属性，未遍历直接调用就会抛出undefined报错

修正后可直接使用的代码 #

你可以直接把以下JavaScript代码替换到Moodle的JS字段中，原有按钮调用逻辑和HTML结构无需修改：

function printFunc() {
    // 获取所有class为printArea的待打印div
    var divsToPrint = document.getElementsByClassName("printArea");
    var htmlToPrint = '' +
        '<style type="text/css">' +
        'table th, table td {' +
        'border:1px solid #000;' +
        'padding:0.5em;' +
        '}' +
        '</style>';
    // 遍历所有待打印元素拼接内容
    for(var i = 0; i < divsToPrint.length; i++) {
        htmlToPrint += divsToPrint[i].outerHTML;
    }
    var newWin = window.open("");
    newWin.document.write("<h3 align='center'>Print Page</h3>");
    newWin.document.write(htmlToPrint);
    newWin.document.close();
    // 确保内容完全加载后再执行打印
    newWin.onload = function() {
        newWin.print();
        newWin.close();
    }
}

主要改动说明 #

• 替换元素获取逻辑为按class属性批量获取所有待打印区域
• 新增遍历逻辑，逐个拼接所有待打印元素的HTML内容
• 修复了原样式代码中padding属性的语法错误（将属性名后的分号修正为冒号）
• 新增新窗口内容写入完成、加载完毕后再触发打印的逻辑，避免内容未渲染完成就打印的异常

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