使用javascript打印按钮，文本对齐在div下不起作用
[英]Text align not working under div using javascript print button
问题描述
I have placed a div on html page and text under it with center align. 
我已经在html页面上放置了一个div，并在其下面以居中对齐方式放置了文本。 A custom java script button is also placed for printing under the div content. 一个自定义的Java脚本按钮也放置在div内容下进行打印。 When i press a button it previews the text with left align. 当我按下一个按钮时，它将以左对齐方式预览文本。 Please anyone guide how to set or apply my css or style to this div for center align. 请任何人指导如何设置或将我的CSS或样式应用于此div以进行中心对齐。 Complete html code is following written in asp.net. 完整的html代码如下编写在asp.net中。 Thanks in advance 提前致谢
<%@ 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>
EDIT 编辑
Your code is working awesome according to my need. 根据我的需要，您的代码非常出色。 I have little observations that i need to understand. 我没有什么需要理解的观察。 I have copied two portions from your code, CSS and javascript. 我从您的代码中复制了CSS和javascript两部分。 Please see below. 请看下面。
<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 Java脚本
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>
You can see above i have written two css files, one is normal under style tag and other is injected to java script and i am writing many lines for css in java script . 您可以在上面看到我编写了两个css文件，一个在style标签下是正常的，另一个被注入到Java脚本中， 并且我在java脚本中为css写了很多行 。 Now i have two simple questions following:- 现在，我有两个简单的问题：
1- Cannot we write one css which should effect everywhere?. 1-我们不能写一个应该在所有地方都起作用的css吗？
2- If the answer of first question is no: then how can i avoid writing multiple css lines in java script. 2-如果第一个问题的答案是否定的：那么我如何避免在Java脚本中编写多个CSS行。
Many thanks. 非常感谢。
1 个解决方案
解决方案1
0 已采纳 2016-08-08 11:37:21
Have a look at the following to point you in the right direction. 请看以下内容，为您指明正确的方向。 Instead of changing the entire page and then reverting it, open a new window to do the print. 无需更改整个页面然后还原它，而是打开一个新window进行打印。 This will stop any potentially nasty bugs appearing when revert the page. 这将阻止还原页面时出现的任何可能令人讨厌的错误。 Also having 2 different class names for non-print and print DIVs may be useful. 对于非打印DIVs和打印DIVs也可以使用2个不同的class names 。 You can put these in an external CSS file and then add the CSS link to the new window aswell. 您可以将它们放在外部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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.