打印时不要使用 jQuery DOM 更改

Question

更新： CSS解决方案如下。

我正在使用 fullpage.js jQuery 插件，不幸的是它也影响网页的打印，只显示当前视口显示及其兄弟。

我遇到的问题是打印命令使用 DOM（很明显），但是插件已经在 DOM 中进行了内联 CSS 更改。有没有办法禁用 print 的 DOM 更改？

这行不通，但这是我的想法：

$(document).ready(function() {
    if(@media !print) { // PS: Not real code!
        $('#fullpage').fullpage();
    }
});

------CSS解决方案------

引导我走上了正确的道路。覆盖 fullpage.js 内联样式所需的 CSS 是：

/* Override javascript inline styles */
html,
body {
    overflow: visible !important;
    height: auto !important;
}

.fullpage-wrapper {
    height: auto !important;
    transform: none !important;
    transition: none !important;
}

.fp-section {
    height: auto !important;
}

.fp-slidesContainer {
    width: auto !important;
    transition: none !important;
    transform: none !important;
}

.fp-slides,
.fp-slides * {
    position: static !important;
}

.fp-slide {
    width: auto !important;
}

Answer 1

在你的 CSS:

中做这样的事情

隐藏整页幻灯片：

.fp-slides {
  display: none;
}

或者使它们成为静态的，因为这将通过正常呈现内容来完成这些工作：

.fp-slides, .fp-slides * {
  position: static !important;
  /* I don't like putting !important,
     but there is no other way to override the inline styles without this!*/
}

否则，您可以指定样式表仅申请screen作为媒体：

<link rel="stylesheet" href="fullpage.css" media="screen" />

Answer 2

您可以使用标志并在调用打印函数时将其设置为真：

var flag = false;
$(document).ready(function() {
  if(flag === false) {
    // all your code
  }


  function toPrint() {
    flag = true;
    window.print();
  }
});

打印时不要使用 jQuery DOM 更改

Don't use jQuery DOM changes when printing

javascript

css

printing

dom

fullpage.js