Question

更新：以下的CSS解决方案。

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

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

这不起作用，但这是我的想法：

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

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

Praveen's reply带领我走上了正确的道路。覆盖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

您可以使用标志并在调用打印功能时将其设置为true：

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


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

打印时不要使用jQuery DOM更改

2 个答案: