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

Javascript - toggle print stylesheet dynamically before window.print()

本文关键字：动态 打印 样式 window print Javascript-      更新时间：2023-09-26

我想实现一个按钮，只打印页面的某个div，同时让用户打印整个页面。我正在为打印样式表使用以下代码，到目前为止效果良好：print<div id=打印区域>lt/div>只有

现在我要做的是包含一个单独的样式表，它只包含这里建议的打印配置：https://stackoverflow.com/a/18497062/5775547，并在我的按钮的onclick函数中切换包含我的@media打印的样式表：

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触发的对话框仍然打印整个页面，这是应该的。你知道为什么第一次按下按钮就不能正常工作吗？

您是否尝试过在样式表更改和使用setTimeout()启动打印函数之间引入延迟？可能只需要几百毫秒或更短的时间。这听起来有点像时间问题。我会试试这样的东西：

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

我设法找到了一个解决方案。我想问题是文件还没有加载，但已经调用了window.print()。然后在第二次单击时，文件仍在缓存中，因此更改足够快。我通过使用$(document).ready和它的success属性来克服这个问题，如下所示：

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();
        }
    });
}

因此，基本上我正在加载文件，等待加载，将其作为样式添加到标题中，打印，然后再次删除样式。可能既不好也不高效，但它似乎工作得很好。

我会将媒体查询与<link>的禁用功能结合起来。

  • 创建样式表指定用户单击按钮时的打印样式，默认情况下，它将被禁用：<link id="print-css-special" disabled="disabled" ... />
  • 一旦用户单击"打印某个区域"，就可以启用样式表、打印，然后禁用样式表

代码

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