jquery PrintArea实现打印能不能设置字体大小,如何设置(急)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery PrintArea实现打印能不能设置字体大小,如何设置(急)相关的知识,希望对你有一定的参考价值。

能啊,你在那个option的extraCss里设置就好了。
或者你直接单独用另一个print.css文件专门放打印的css就好了。
然后把这个放在header里<link rel="stylesheet" href="print.css" type="text/css" media="print" />
参考技术A 能啊,你在那个option的extraCss里设置就好了。
或者你直接单独用另一个print.css文件专门放打印的css就好了。
然后把这个放在header里<link
rel="stylesheet"
href="print.css"
type="text/css"
media="print"
/>
参考技术B 你把设置字体大小的样式写到行内样式表里,这样应该没问题。

jquery局部打印插件使用

基于jquery库的jquery.PrintArea.js插件源代码为:

 1 (function ($) {
 2     var printAreaCount = 0;
 3     $.fn.printArea = function () {
 4         var ele = $(this);
 5         var idPrefix = "printArea_";
 6         removePrintArea(idPrefix + printAreaCount);
 7         printAreaCount++;
 8         var iframeId = idPrefix + printAreaCount;
 9         var iframeStyle = \'position:absolute;width:0px;height:0px;left:-500px;top:-500px;\';
10         iframe = document.createElement(\'IFRAME\');
11         $(iframe).attr({
12             style: iframeStyle,
13             id: iframeId
14         });
15         document.body.appendChild(iframe);
16         var doc = iframe.contentWindow.document;
17         $(document).find("link").filter(function () {
18             return $(this).attr("rel").toLowerCase() == "stylesheet";
19         }).each(
20                 function () {
21                     doc.write(\'<link type="text/css" rel="stylesheet" href="\'
22                             + $(this).attr("href") + \'" >\');
23                 });
24         doc.write(\'<div class="\' + $(ele).attr("class") + \'">\' + $(ele).html()
25                 + \'</div>\');
26         doc.close();
27         var frameWindow = iframe.contentWindow;
28         frameWindow.close();
29         frameWindow.focus();
30         frameWindow.print();
31     }
32     var removePrintArea = function (id) {
33         $("iframe#" + id).remove();
34     };
35 })(jQuery);

插件使用方法:

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 
 4     <head>
 5         <meta charset="UTF-8" />
 6         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 8         <title>jquery.PrintArea.js 插件使用</title>
 9     </head>
10 
11     <body>
12         <div>
13             <button id="print">打印</button>
14         </div>
15         <div id="printContent">
16             局部打印
17         </div>
18         <!--需要引入jquery库-->
19         <script src="../jquery/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
20         <script src="jquery.PrintArea.js" type="text/javascript" charset="utf-8"></script>
21         <script type="text/javascript">
22             $(\'#print\').click(function() {
23                 $("#printContent").printArea();
24             });
25         </script>
26     </body>
27 
28 </html>

效果:

 

以上是关于jquery PrintArea实现打印能不能设置字体大小,如何设置(急)的主要内容,如果未能解决你的问题,请参考以下文章

js调用打印机

jquery局部打印插件使用

在网页打印显示请求服务器成功,但回调JS方法出错!

使用Jquery打印div内容

只打印 <div id="printarea"></div>?

一个web打印很好用的插件