Question

我有一个名为contract的变量，它从服务器收到一些HTML内容。获取此变量以获得打印的最简单方法是什么？通过打印，我的意思是按下我的按钮：弹出Chrome中的打印窗口，文档显示我的变量的内容（因为它已经是一个用CSS分页媒体格式化的HTML，它看起来已准备好打印/保存pdf）

var contract = <HTML content>
$('#print').click(function () {
    <Pops up the print window of chrome with 'contract' opened>
})

我浏览过建议使用iframe（here，here）和建议窗口弹出窗口（here）的答案，但说实话，这有点令人困惑因为它不应该非常困难。你能否建议一种直接的方法来完成这项工作？

Answer 1

让我们说HTML的内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Contract</title>
  </head>
  <body>
    <h1>Contract</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam eum soluta ullam, in, qui iusto omnis rerum nisi alias, ducimus, dignissimos rem deserunt excepturi illo sint unde harum quas! Id.</p>
    <p>Signed: <br> Dated:</p>
  </body>
</html>

将它们存储在一个值中，例如myHTML。

$("input").click(function () {
  myHTML = '';
  myWin = window.open("about:blank", "_blank");
  myWin.document.write(myHTML);
  myWin.print();
});

使用CSS更新

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Print Preview</title>
    <style>
      /* Start Praveen's Reset for Fiddle ;) */
      * {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
      h1, h2, h3, h4, h5, h6, strong, b, th {font-weight: 600;}
      textarea, tt, pre, pre *, code, code * {font-family: 'Consolas';}
      /* End Praveen's Reset for Fiddle ;) */

      h1 {font-size: 1.2em;}
      h1, p {margin: 0 0 10px; line-height: 1.5;}
      .logo img {display: block; max-width: 75%; margin: 0 auto;}

      #dont-print {padding: 10px;}
      #dont-print h1 {background-color: #eef; padding: 5px 10px; margin: -10px -10px 10px;}
      #print-this {display: none;}

      @media print {
        #dont-print {display: none;}
        #print-this {margin: 10px; display: block;}
      }
    </style>
  </head>
  <body>
    <div id="dont-print">
      <div class="logo">
        <img src="https://www.microsoft.com/about/corporatecitizenship/en-us/downloadhandler.ashx?Id=07-03-02" alt="" />
      </div>
      <h1>Contract</h1>
      <p>Print this. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia dicta id, doloribus perspiciatis nam fugiat consequatur at inventore similique error excepturi praesentium vitae alias voluptatibus modi officiis atque dignissimos debitis.</p>
      <p>Signed: <br>Dated:</p>
    </div>
    <div id="print-this">
      <h1>Contract</h1>
      <p>Print this. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia dicta id, doloribus perspiciatis nam fugiat consequatur at inventore similique error excepturi praesentium vitae alias voluptatibus modi officiis atque dignissimos debitis.</p>
      <p>Signed: <br>Dated:</p>
    </div>
  </body>
</html>

现场演示：http://output.jsbin.com/vuzixonajo

从javascript打印变量

1 个答案: