Javascript - 在 window.print() 之前动态切换打印样式表

Question

我想实现一个按钮来仅打印页面的某个 div，同时为用户留下打印整个页面的可能性。我正在使用此代码作为打印样式表，到目前为止效果良好:Print <div id=printarea></div> only?

现在我正在做的是包含一个单独的样式表，其中仅包含此处建议的打印配置:https://stackoverflow.com/a/18497062/5775547 ，然后在按钮的 onclick 函数中切换包含我的 @media print 的样式表:

function handlePrintRouteInstructionsClick() {
    routeInstructions.show();
    $('link[id="printCss"]').prop("href", "css/printRouteInstructions.css");
    window.print();
    $('link[id="printCss"]').prop("href", "");
}

CSS 是这样包含的:

<link rel="stylesheet" type="text/css" href="" id="printCss" media="print"/>

现在，当我按下按钮时，它仍然打印整个页面。有趣的是，当第二次按下该按钮时，它会按预期工作，仅打印指定的 div。 Ctrl+P 触发的对话框仍然会打印整个页面，正如它应该的那样。有什么想法为什么这在第一次按下按钮时不能正常工作吗？

Answer 1

您是否尝试过在样式表更改和使用 setTimeout() 触发打印函数之间引入延迟？可能只需要几百毫秒或更短的时间。这听起来像是一个时间问题。我会尝试这样的事情:

function handlePrintRouteInstructionsClick() {
    routeInstructions.show();
    $('link[id="printCss"]').prop("href", "css/printRouteInstructions.css");
    setTimeout(window.print(), 200);
    $('link[id="printCss"]').prop("href", "");
}