Question

我正在开发一个显示聊天对话的html页面，我希望它能够与打印机友好，以便轻松导出为PDF。我的问题是长图像可以跨越多个页面。我希望这些占据1页的最大高度，但我不确定最好的方法。

以下是它的外观： https://i.imgur.com/OboygPm.png

这是我正在使用的代码： https://jsfiddle.net/BigJeng/7k1ty7fj/

消息设置为占用不超过60％的宽度。

model.findOne({
    ...
}).then((user) => {
    user = user.toJSON();
    console.log(user.type);
})

/* message containers */

.message {
  border: 2px solid #dedede;
  background-color: #f1f1f1;
  border-radius: 2px;
  padding: 2px;
  display: table;
}


/* sent message container */

.sent {
  border-color: #ccc;
  background-color: #ddd;
}


/* message wrapper to limit width */

.message-wrapper {
  width: 60%;
  margin-bottom: 10px;
}

.right {
  float: right;
}


/* Style time text */

.time {
  color: #999;
}

.clear {
  clear: both;
  margin: 0px;
}

h1 {
  padding: 0px;
  margin: 0px;
}

h3 {
  padding: 0px;
  margin: 0px;
}

img {
  width: 100%;
}

如何使图像/日期div的最大高度为1 8.5“x 11”张纸@ 600 dpi？

Answer 1

您可以在css中使用@media规则在打印介质时应用特定样式。

<style tyle="text/css">
   @media print
   {
      .message{
         //print specific styles go here for div with class as message
      }
   }
</style>

Answer 2

这将解决您的问题：

@media print {
    img {page-break-inside: avoid;max-height: 95vh;max-width: 100%;width: auto;}
}

只需将上面的CSS添加到您的代码中即可。

page-break-inside: avoid;max-height: 95vh会使图像适合打印页面，@media print将确保它仅在打印时使用。

与你自己的代码合作。

＆＃13;

/* message containers */

.message {
  border: 2px solid #dedede;
  background-color: #f1f1f1;
  border-radius: 2px;
  padding: 2px;
  display: table;
}


/* sent message container */

.sent {
  border-color: #ccc;
  background-color: #ddd;
}


/* message wrapper to limit width */

.message-wrapper {
  width: 60%;
  margin-bottom: 10px;
  page-break-inside: avoid;
  page-break-after: auto
}

.right {
  float: right;
}


/* Style time text */

.time {
  color: #999;
}

.clear {
  clear: both;
  margin: 0px;
}

h1 {
  padding: 0px;
  margin: 0px;
}

h3 {
  padding: 0px;
  margin: 0px;
}

img {
  width: 100%;
}

@media print {
  img {
    page-break-inside: avoid;
    max-height: 95vh;
    max-width: 100%;
    width: auto;
  }
}

＆＃13;

<h1>Paul "Wrecking" Crewe</h1>
<h3>555-555-5555</h3>
<br>

<div class="message-wrapper right">
  <span class="time right">5/8/17 12:23 PM</span>
  <br>
  <div class="message sent right">Test</div>
</div>
<div class="clear" />

<div class="message-wrapper ">
  <span class="time">5/8/17 12:23 PM</span>
  <br>
  <div class="message">Haha yeah</div>
</div>
<div class="clear" />

<div class="message-wrapper right">
  <span class="time right">5/8/17 12:23 PM</span>
  <br>
  <div class="message sent right">
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  </div>
</div>
<div class="clear" />

<div class="message-wrapper ">
  <span class="time">5/8/17 12:23 PM</span>
  <br>
  <div class="message">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
</div>
<div class="clear" />

<div class="message-wrapper right">
  <span class="time right">12/6/17 3:56 PM</span>
  <br>
  <div class="message sent right">
    <img src="http://i.imgur.com/ImlYX.gif">
  </div>
</div>
<div class="clear" />

<div class="message-wrapper right">
  <span class="time right">3/18/18 4:21 PM</span>
  <br>
  <div class="message sent right">
    <img src="https://i.imgur.com/ldSywk2.jpg">
  </div>
</div>
<div class="clear" />

<div class="message-wrapper">
  <span class="time">3/18/18 4:21 PM</span>
  <br>
  <div class="message sent">
    <img src="https://i.imgur.com/WIaOSv6.jpg">
  </div>
</div>
<div class="clear" />

<div class="message-wrapper">
  <span class="time">3/18/18 4:21 PM</span>
  <br>
  <div class="message sent">
    <img src="https://i.imgur.com/pNdgqYe.png">
  </div>
</div>
<div class="clear" />

<div class="message-wrapper right">
  <span class="time right">3/18/18 4:22 PM</span>
  <br>
  <div class="message sent right">
    <img src="https://i.imgur.com/rzM7V7J.jpg">
  </div>
</div>
<div class="clear" />

＆＃13;

希望这对你有所帮助。

打印时将图像格式化为最大1页

2 个答案: