Question

我有一个创建报告生成器的项目。目标是以16：9的比例创建一个网页版本（在浏览器上显示），打印版本可以很好地打印。

所以我有几个问题。

首先，我已经阅读了很多关于此的答案，而不是一个是相同的。那么打印的像素宽度/高度是否良好

喜欢：

＆＃13;

.page{width:21cm; height:29.7cm})

＆＃13;

<div class='page'></div>

＆＃13;

如果不是人们如何做到这一点？

另一个问题：我想使用enquire.js修改我的DOM打印（因为我一次只显示一张幻灯片，我需要打印所有这些）。问题是它只显示一页。我认为这是一个时间问题（在浏览器获取页面之前，查询并未完成它的工作，所以它只是部分修改过。这是我能想到的唯一原因）

＆＃13;

enquire.register('print', {
  match: function() {
    slides.each(function(index, element) {
      $("#printContainer").append(element)
    });


    $('.slider').css('display', 'none')
  }
});

＆＃13;

Answer 1

您可以使用两个不同的css文件（print/screen）：

<link rel="stylesheet" media="screen" type="text/css" href="/screen-styles.min.css">
<link rel="stylesheet" media="print" type="text/css" href="/print-styles.min.css">

当您从浏览器查看网站时，第一个css表将仅影响布局。现在，当您按下打印按钮（或大多数浏览器中的ctrl+p）时，第二张纸将影响布局，第一张将被忽略。

为打印和显示目的设计网页

1 个答案: