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

我想实现一个按钮，只打印页面的某个div，同时让用户可以打印整个页面。我将此代码用于打印样式表，到目前为止效果良好：

现在，我要做的是包括一个单独的样式表，它只包含此处建议的打印配置：，并在my button的onclick函数中切换包含my@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"/>

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

function handlePrintRouteInstructionsClick() {
    $.ajax({
        url:"css/printRouteInstructions.css",
        success:function(data){
            var style = $("<style />", {
                id  : 'printCss',
                type: 'text/css',
                html: data
            }).appendTo("head");
            routeInstructions.show();
            window.print();
            style.remove();
        }
    });
}

现在，当我按下按钮时，它仍然打印整个页面。有趣的是，当第二次按下按钮时，它的工作原理与预期一样，只打印指定的div。由Ctrl+P触发的对话框仍然打印整个页面，这是它应该打印的。

---

你知道为什么在第一次按下按钮时不能正常工作吗？

你是否尝试过在样式表更改和使用

setTimeout（）

启动打印功能之间引入延迟？可能只需要几百毫秒或更短的时间。这听起来像是个时间问题。我想试试这样的东西：

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

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

function handlePrintRouteInstructionsClick() {
    $.ajax({
        url:"css/printRouteInstructions.css",
        success:function(data){
            var style = $("<style />", {
                id  : 'printCss',
                type: 'text/css',
                html: data
            }).appendTo("head");
            routeInstructions.show();
            window.print();
            style.remove();
        }
    });
}

---

您是否尝试过使用

setTimeout（）

在样式表更改和启动打印函数之间引入延迟？可能只需要几百毫秒或更短的时间。这听起来像是个时间问题。我想试试这样的东西：

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

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

function handlePrintRouteInstructionsClick() {
    $.ajax({
        url:"css/printRouteInstructions.css",
        success:function(data){
            var style = $("<style />", {
                id  : 'printCss',
                type: 'text/css',
                html: data
            }).appendTo("head");
            routeInstructions.show();
            window.print();
            style.remove();
        }
    });
}

---

我设法找到了解决办法。我想问题是文件尚未加载，但已调用了

window.print（）

。然后在第二次单击时，文件仍在缓存中，因此更改足够快。通过使用

$（document）.ready

及其

success

属性，我成功地解决了这个问题，如下所示：

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

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

function handlePrintRouteInstructionsClick() {
    $.ajax({
        url:"css/printRouteInstructions.css",
        success:function(data){
            var style = $("<style />", {
                id  : 'printCss',
                type: 'text/css',
                html: data
            }).appendTo("head");
            routeInstructions.show();
            window.print();
            style.remove();
        }
    });
}

函数handlePrintRouteInstructions单击（）{
$.ajax({
url:“css/printRouteInstructions.css”，
成功：功能（数据）{
变量样式=$（“”{
id:'printCss'，
键入：“text/css”，
html：数据
}).附录（下称“标题”）；
routeInstructions.show（）；
window.print（）；
style.remove（）；
}
});
}

因此，基本上我正在加载文件，等待加载，将其作为样式添加到标题中，打印，然后再次删除样式。

---

可能既不好也不高效，但它似乎工作得很好。

我设法找到了一个解决方案。我想问题是文件尚未加载，但已调用了

window.print（）

。然后在第二次单击时，文件仍在缓存中，因此更改足够快。通过使用

$（document）.ready

及其

success

属性，我成功地解决了这个问题，如下所示：

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

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

function handlePrintRouteInstructionsClick() {
    $.ajax({
        url:"css/printRouteInstructions.css",
        success:function(data){
            var style = $("<style />", {
                id  : 'printCss',
                type: 'text/css',
                html: data
            }).appendTo("head");
            routeInstructions.show();
            window.print();
            style.remove();
        }
    });
}

函数handlePrintRouteInstructions单击（）{
$.ajax({
url:“css/printRouteInstructions.css”，
成功：功能（数据）{
变量样式=$（“”{
id:'printCss'，
键入：“text/css”，
html：数据
}).附录（下称“标题”）；
routeInstructions.show（）；
window.print（）；
style.remove（）；
}
});
}

因此，基本上我正在加载文件，等待加载，将其作为样式添加到标题中，打印，然后再次删除样式。

---

可能既不好也不高效，但它似乎工作得很好。

我会将媒体查询与禁用的

功能结合起来

• 创建样式表指定用户单击按钮时的打印样式，默认情况下，它将被禁用：

• 一旦用户单击“打印某个区域”，就可以启用样式表、打印，然后禁用样式表

代码

button.addEventListener(e => {
   var printStyleSheet = document.getElementById('print-css-special');
   printStyleSheet.removeAttribute('disabled');               
   window.print(); 
   printStyleSheet.setAttribute('disabled', 'disabled')
});

---

我会将媒体查询与禁用的

功能结合起来

• 创建样式表指定用户单击按钮时的打印样式，默认情况下，它将被禁用：

• 一旦用户单击“打印某个区域”，就可以启用样式表、打印，然后禁用样式表

代码

button.addEventListener(e => {
   var printStyleSheet = document.getElementById('print-css-special');
   printStyleSheet.removeAttribute('disabled');               
   window.print(); 
   printStyleSheet.setAttribute('disabled', 'disabled')
});

---

为什么不直接使用CSS媒体查询？我想我只是没有看到一个单独的样式表和交换它们的理由。打印介质查询仅在打印页面时处于活动状态。是的，这就是问题所在。我需要它在用户按下按钮打印特定容器（routeInstructions）后激活。但当用户试图打印整个页面时，它不应处于活动状态。我会看看你的链接，谢谢。你有链接到你正在尝试的页面吗？只有最新的稳定版本-。我目前正在本地服务器上工作。为什么不直接使用CSS媒体查询？我想我只是没有看到一个单独的样式表和交换它们的理由。打印介质查询仅在打印页面时处于活动状态。是的，这就是问题所在。我需要它在用户按下按钮打印特定容器（routeInstructions）后激活。但当用户试图打印整个页面时，它不应处于活动状态。我会看看你的链接，谢谢。你有链接到你正在尝试的页面吗？只有最新的稳定版本-。我目前正在本地服务器上工作。Matt，谢谢你的回答。是的，可能是时间问题。见下面我的答案。异步ajax函数对我来说似乎比setTimeout@HLeuschn我对

$（document.ready

在您的解决方案中的作用非常感兴趣。只有在单击按钮后才会触发

handlePrintRouteInstructionsClick（）

。我冒昧地说，如果用户单击某个按钮，文档就完成加载，不再需要

$（文档）。就我所知，准备好了吗

。@Matt，你说得对，不需要它。谢谢你的提示。马特，谢谢你的回答。是的，可能是时间问题。见下面我的答案。异步ajax函数对我来说似乎比