使用Javascript的window.print中的对齐问题答案

【问题标题】：Aligment issue in window.print using Javascript使用Javascript的window.print中的对齐问题
【发布时间】：2016-01-10 18:02:39
【问题描述】：

我正在为我的打印 div 使用 java-script window.print。当我打印该 div 时，我的打印页面中出现对齐问题。

在我用于打印的代码下方，我也上传了两张图片。第一个是我的输出图像，第二个是我打印的那个布局。

  function PrintPopup() {
        var data = $("#viewCoupon").html();
        var mywindow = window.open('', 'Print Data', 'height=540,width=980');
        mywindow.document.write("<html><head><title>Bonus Box Offer</title>");
        mywindow.document.write("<link href=\"Content/style.css\" rel=\"stylesheet\" />");
        mywindow.document.write("<style>.userwinners{margin-top: 51px;margin-left: 0;} .no-Print{display:none;}  @media print {.no-Print{display:none;} title {display:none;} }</style>");
        mywindow.document.write("</head><body >");
        mywindow.document.write(data);
        mywindow.document.write("</body></html>");

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

        mywindow.print();
        //mywindow.close();

        return true;
    }

【问题讨论】：

请把你的html代码放在这里。
请阅读this 并使用适当的边距格式化您的页面。
您能否创建一个 jsfiddle .. 以便更好地理解 .. 问题需要在您html 和 css 中解决

标签： javascript jquery html css .net

【解决方案1】：

使用单独的 CSS 文件。因此，您可以使用 CSS 以更好的方式对齐页面，正如您所期望的那样。这是 CSS 文件包含的代码，仅对 PRINT 有效。

<link rel="stylesheet" type="text/css" href="print.css" media="print">

因此您可以添加任何您想要对齐打印页面的 CSS。

【讨论】：