PrintThis 在按下按钮时覆盖自定义 CSS
PrintThis override custom CSS when pressing button
我使用 PrintThis Jquery 插件。
我使用 Bootstrap 作为我的框架。
使用 PrintThis 打印时,我想减小字体大小。
我刚刚在文档中进行了样式更改。像这样:
<style>
body {
font-size: 8px;
line-height: 1.42857143;
}
</style>
页面首次加载时。所有文字都是 8px。
但是当我按下 PrintThis 按钮时,页面 reloads/changes 所有文本都变为 Bootstrap 默认 14px。
这是为什么?
HTML for printButton
<button class="btn btn-default pull-right" id="print_btn"><span class="glyphicon glyphicon-print" title="Print"></span></button>
用于 printThis 的 JS
<script>
$(document).ready(function () {
$('#print_btn').click(function () {
$('#usr_name, #list_usr_time, #sum_worked_time, #break_page').printThis();
});
});
</script>
更新
我将样式从页面移动到 CSS 文件中。
然后我将 css 文件加载到页面中。
我还添加了:loadCSS: "css/custom_printthis.css", 到自定义 Jquery.
结果是,页面没有覆盖 css。文字是8px,正如我想要的。但是,当我按下“打印”时,预览显示 table 标签内的 14px 文本...和外部的 8px 文本。 Maby 我需要在我的 css...
中添加 "table.tex"
为了解决这个问题,我为 php 打印的所有文本创建了一个新的 class。
然后我为 class 创建了一个 CSS 文件,并覆盖了 Bootstrap 的原始字体大小。
<td class="table_text">Text</td>
.table_text{
font-size: 10px;
}
我使用 PrintThis Jquery 插件。
我使用 Bootstrap 作为我的框架。
使用 PrintThis 打印时,我想减小字体大小。
我刚刚在文档中进行了样式更改。像这样:
<style>
body {
font-size: 8px;
line-height: 1.42857143;
}
</style>
页面首次加载时。所有文字都是 8px。
但是当我按下 PrintThis 按钮时,页面 reloads/changes 所有文本都变为 Bootstrap 默认 14px。
这是为什么?
HTML for printButton
<button class="btn btn-default pull-right" id="print_btn"><span class="glyphicon glyphicon-print" title="Print"></span></button>
用于 printThis 的 JS
<script>
$(document).ready(function () {
$('#print_btn').click(function () {
$('#usr_name, #list_usr_time, #sum_worked_time, #break_page').printThis();
});
});
</script>
更新
我将样式从页面移动到 CSS 文件中。
然后我将 css 文件加载到页面中。
我还添加了:loadCSS: "css/custom_printthis.css", 到自定义 Jquery.
结果是,页面没有覆盖 css。文字是8px,正如我想要的。但是,当我按下“打印”时,预览显示 table 标签内的 14px 文本...和外部的 8px 文本。 Maby 我需要在我的 css...
为了解决这个问题,我为 php 打印的所有文本创建了一个新的 class。
然后我为 class 创建了一个 CSS 文件,并覆盖了 Bootstrap 的原始字体大小。
<td class="table_text">Text</td>
.table_text{
font-size: 10px;
}