如何在PrintThis插件的页脚中使用输入框的值

其实很简单，PrintThis插件本身提供了footer配置项，支持自定义打印页脚内容。我们只需要在触发打印时，动态获取输入框的当前值，再把它塞进页脚配置里就行。

给你修改后的完整代码，我会一步步说明：

$(document).on("click", "#btnPrint", function(e) {
    // 先获取两个输入框的当前值，确保拿到的是用户最新输入的内容
    const inputWVal = $("#txtW").val() || "未填写";
    const inputAtVal = $("#txtAt").val() || "未填写";

    $("#table, #txtW, #txtAt").printThis({
        debug: false,
        importCSS: true,
        importStyle: true,
        printContainer: true,
        loadCSS: "",
        pageTitle: "",
        removeInline: true,
        // 这里就是自定义的页脚，把刚才拿到的输入框值插进去
        footer: `<div style="text-align:center; margin-top:20px; font-size:14px;">
                    输入框W内容：${inputWVal} | 输入框At内容：${inputAtVal}
                </div>`
    });
});

关键细节说明： #

• 我把按钮ID从#btnPrin9t改成了#btnPrint，应该是你打错了，要是实际ID就是这个，改回去就行。
• 用|| "未填写"做了兜底，防止用户没输入内容时页脚显示空值，体验更友好。
• 页脚里加了简单的内联样式，你可以根据自己的需求调整排版、字体这些。
• 一定要在点击事件里获取输入框值，而不是提前在外面定义——这样才能保证每次打印时拿到的都是用户最新输入的内容，而不是页面加载时的初始值。

如果你的页脚需要更复杂的结构，比如和页面样式统一，也可以把页脚的HTML结构提前写在页面里，然后获取它的内容并替换掉占位符，再传给footer参数，比如：

假设页面里有个隐藏的模板：

<div id="printFooterTemplate" style="display:none;">
    <div class="footer-style">
        W值：{{wVal}} | At值：{{atVal}}
    </div>
</div>

然后在JS里处理：

const footerTemplate = $("#printFooterTemplate").html()
    .replace("{{wVal}}", inputWVal)
    .replace("{{atVal}}", inputAtVal);

再把footer: footerTemplate放进配置里就行，这样维护样式更方便。

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