- 我想知道我的 iFrame 作为
下面图片 1 中的表格有
font-size: 20px和日期， Requester, Place From...得到了大约font-size12-14px。 - 然后，我打印了那一页。一切都出了问题
表格中文本的大小作为 iFrame。 (请看一下
font-size同下图2)。 - 之后，我尝试将
font-size添加到 CarBookingCSS.txt 中 为了按照下面的代码对 iFrame 进行更改，但它仍然 没用。
CSS:
iframe {
font-size: 50px !important;
}
或
#iframe_link {
font-size: 50px !important;
}
总结:作为表格的iFrame在打印前和打印后的font-size是完全不同的。尽管我对 CarBookingCSS.txt 进行了一些更改，但它仍然没有起作用。
图1:
图2:
HTML:
<input onclick="printDiv('page_printer');" type="button" value="Print" />
<table id="page_printer">
<tr>
<td>
<fieldset class="box">
<legend class="text_transportation">EMPLOYEE GATE PASS</legend>
<table>
<tr>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Date</nobr>
</H3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<div>2014</div>
</td>
</tr>
<tr>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Requester</nobr>
</H3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<div></div>
</td>
</tr>
<tr>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Place From</nobr>
</H3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<div>P1</div>
</td>
</tr>
<tr>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Place To</nobr>
</H3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<div>P3</div>
</td>
</tr>
<tr>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Purpose</nobr>
</H3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<div></div>
</td>
</tr>
<tr>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Business date - From</nobr>
</H3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<div>2014</div>
</td>
</tr>
<tr>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Business date - To</nobr>
</H3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<div>2014</div>
</td>
</tr>
</table>
</fieldset>
</td>
</tr>
</table>
Javascript:
function printDiv(divID) {
var printContent = document.getElementById(divID);
var windowUrl = '';
var uniqueName = new Date();
var windowName = 'Print' ;
var printWindow = window.open(windowUrl, windowName, 'left=-20,top=-20,width=800px,height=600px');
printWindow.document.write("<HTML><Head><Title></Title><link rel='stylesheet' type='text/css' href='/Style%20Library/CarBookingCSS.txt' media='print' />");
printWindow.document.write("</Head><Body style='margin-left:10px;margin-top:0px;font-weight:bold'>");
printWindow.document.write(printContent.innerHTML);
printWindow.document.write('</Body></HTML>');
printWindow.document.close();
printWindow.focus();
//Print Page
setTimeout(function () { print_page(); }, 1000);
function print_page() {
printWindow.print();
}
//Restore orignal HTML
setTimeout(function () { restore_page(); }, 6000);
function restore_page() {
printWindow.close();
}
}
CSS:
.ms-bodyareaframe {
padding: 8px;
border: none;
}
.text_transportation {
font-size: large;
color: red;
}
.text_approveStep {
font-size: large;
color: red;
}
.box {
width: 750px !important;
}
.set_width {
width: 350px !important;
}
.set_backgr {
text-decoration: none !important;
color: #0072BC !important;
font-family: Verdana, Arial, sans-serif !important;
border: none !important;
background-color: #F6F6F6 !important;
}
.set_backgr:hover {
text-decoration: none !important;
cursor: pointer;
}
.readOnly {
background-color: #F6F6F6 !important;
color: #676767 !important;
border: none !important;
cursor: default;
}
最佳答案
您的 css 可能包含在 html 中，例如:
<link rel="stylesheet" type="text/css" href="theme.css" media="screen" />
要么删除 media="screen"，要么添加另一个用于打印:
<link rel="stylesheet" type="text/css" href="print.css" media="print"/>
关于javascript - 使用 CSS 或 Javascript 打印前后我的 iFrame 有什么问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24154585/