Question

我在html页面和文本下放置了一个div，中心对齐。还会放置一个自定义Java脚本按钮，用于在div内容下打印。当我按下按钮时，它会以左对齐方式预览文本。请任何人指导如何设置或应用我的CSS或样式到这个div为中心对齐。完整的html代码是在asp.net中编写的。提前致谢

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="margin_issue.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    <title></title>

</head>
<body>

    <form id="form1">

         <div id="DivForPrint" class="myDivToPrint" style="border: 1px dotted black; text-align: right; padding-left: 250px; width: 600px">
            <span style="font-size: 10pt; font-weight: bold; font-family: Arial">Hello,
            <br />
                This is <span style="color: #0090CB">Mudassar Khan</span>.<br />
                Hoping that you are enjoying my articles!</span>
        </div>
        <br />
        <input type="button" value="Print" onclick="javascript: printDiv('DivForPrint')" style="width: 80px; height: 30px;" />
    </form>

</body>
</html>

<script type="text/javascript">
    function printDiv(divID) {
        //Get the HTML of div
        var divElements = document.getElementById(divID).innerHTML;
        //Get the HTML of whole page
        var oldPage = document.body.innerHTML;

        //Reset the page's HTML with div's HTML only
        document.body.innerHTML =
          "<html><head><title></title></head><body>" +
          divElements + "</body>";

        //Print Page
        window.print();

        //Restore orignal HTML
        document.body.innerHTML = oldPage;
    }
</script>

修改

根据我的需要，您的代码非常棒。我几乎没有必要了解的观察结果。我已经从你的代码，CSS和javascript复制了两个部分。请参阅下文。

<style>
        .page_size { border: 1px dotted black;  text-align: left; width: 800px; height: 950px; }
        .instr_date { text-align: right; padding-right: 0px; padding-top: 40px;}
        .benef_name {text-align: left; padding-left: 50px;  padding-top: 50px; }
        .leftDiv { border: 1px dotted black; text-align: left; padding-left: 0px;     }
    </style>

的Javascript

    function printDiv(divID) {

        var div = document.getElementById(divID).outerHTML;
        var mywindow = window.open('', 'Print Contents');
        mywindow.document.write('<html><head><title>Print Contents</title>');

        mywindow.document.write('<style>  .page_size {border: 1px dotted black; text-align: left; width: 800px; height: 950px; }</style>');
        mywindow.document.write('<style> .instr_date {text-align: right; padding-right: 0px; padding-top: 40px;        }</style>');
        mywindow.document.write('<style> .benef_name { text-align: left; padding-left: 50px; padding-top: 50px; }</style>');
        mywindow.document.write('<style> .leftDiv {border: 1px dotted black; text-align: left; padding-left: 0px; }</style>');

        mywindow.document.write('</head><body>');
        mywindow.document.write(div);
        mywindow.document.write('</body></html>');

        mywindow.document.close();  // necessary for IE >= 10
        mywindow.focus();           // necessary for IE >= 10

        mywindow.print();
        mywindow.close();
    }

</script>

你可以看到上面我已经写了两个css文件，一个在样式标签下是正常的，另一个是注入java脚本，我在java脚本中为css写了很多行。现在我有两个简单的问题： -

1-我们不能写一个应该影响到处的css吗？。

2-如果第一个问题的答案是否定的：那么我怎样才能避免在java脚本中编写多个css行。

非常感谢。

Answer 1

请看下面的内容，为您指明正确的方向。不要更改整个页面然后还原它，而是打开一个新的window来进行打印。这将阻止在还原页面时出现的任何可能令人讨厌的错误。对于非打印和打印class names，还有2个不同的DIVs可能很有用。您可以将这些文件放在外部CSS文件中，然后将CSS链接添加到新窗口中。

<html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">

      <title>
      </title>

      <style>
        .myDiv {
          border: 1px dotted black; text-align: right; padding-left: 250px; width: 600px;
        }
      </style>

      <script type="text/javascript">
        function printDiv(divID) {

          var div = document.getElementById(divID).outerHTML;
          var mywindow = window.open('', 'Print Contents');
          mywindow.document.write('<html><head><title>Print Contents</title>');
          mywindow.document.write('<style>.myDiv {border: 1px dotted black; text-align: center; width: 100%;}</style>');
          mywindow.document.write('</head><body>');
          mywindow.document.write(div);
          mywindow.document.write('</body></html>');

          mywindow.document.close();  // necessary for IE >= 10
          mywindow.focus();           // necessary for IE >= 10

          mywindow.print();
          mywindow.close();
        }
      </script>

  </head>
  <body>

      <form id="form1">
           <div id="DivForPrint" class="myDiv">
              <span style="font-size: 10pt; font-weight: bold; font-family: Arial">Hello,
              <br />
              This is <span style="color: #0090CB">Mudassar Khan</span>.<br />
              Hoping that you are enjoying my articles!</span>
          </div>
          <br />
          <input type="button" value="Print" onclick="javascript: printDiv('DivForPrint')" style="width: 80px; height: 30px;" />
      </form>

  </body>
</html>

文本对齐不使用javascript打印按钮在div下工作

1 个答案: