پرینت یا چاپ یک صفحه یا مشخص کردن قسمتی برای پرینت با جی کوئری
- پرینت قسمتی از یک صفحه
- پرینت یا چاپ صفحه بدون چاپ دکمه ها
- پرینت با سربرگ
- پرینت قسمت های مختلف صفحه به صورت جدا
- عملیات پرینت در صفحه ای جدید
- پرینت متن با یک فونت خاص
- پرینت در اندازه های مختلف
- و ....
عملیات پرینت قسمتی از متن با جی کوئری jquery
برای عملیات پرینت قسمتی از متن با جی کوئری شما نیاز به یک پلاگین آماده شده دارید که تمام گزینه های یاد شده برای پرینت با جی کوئری را پشتیبانی کند و از توابع این پلاگین به صورت گسترده استفاده کنید خب پلاگین های زیادی برای این موضوع وجود دارد اما در چند سال گذشته و براساس تجربه ای که در استفاده از پلاگین ها دارم پیشنهاد می کنم از پلاگین jQuery Plugin To Print Any Part Of Your Page - Print استفاده کنید.
آموزش چاپ قسمتی از صفحه با جی کوئری
افزودن فایل jquery چاپ
در لینکی که معرفی کردیم پس از دانلود پلاگین چاپ با جی کوئری، این پلاگین را به قسمت header صفحه خود اضافه کنید
<script src="jQuery.print.js"></script>
خب این پلاگین فایل css ندارد که به صفحه خود اضافه کنید.
تعیین بخشی از صفحه برای چاپ با jquery
بر فرض اینکه ما یک div با شناسه printable تعریف کرده ایم که قسمتی برای پرینت از صفحه می باشد. در واقع تعیین بخشی از صفحه برای چاپ می باشد
<div id="printable">
Your Content
</div>
سپس یک دکمه برای چاپ بخش مورد نظر در صفحه خود ایجاد می کنیم
<button class="print"> Print this </button>
و در آخر تابعی برای اجرای عملیات چاپ با استفاده از این پلاگین به صفحه خود به صورت ذیل اضافه می کنیم
<script type='text/javascript'>
$(function() {
$("#printable").find('.print').on('click', function() {
$.print("#printable");
});
});
</script>
توجه کنید که تابع print بر روی کلاس یا شناسه و همچنین یک المنت صفحه قابل اجرا و همچون انتخاب یک المنت با جی کوئری می تواند بر روی عناصر صفحه عملیات پرینت را انجام دهد.
تنظیمات چاپ با جی کوئری jquery
$(function() {
$("#printable").find('.print').on('click', function() {
$("#printable").print({
// Use Global styles
globalStyles : false,
// Add link with attrbute media=print
mediaPrint : false,
//Custom stylesheet
stylesheet : "http://fonts.googleapis.com/css?family=Inconsolata",
//Print in a hidden iframe
iframe : false,
// Don't print this
noPrintSelector : ".avoid-this",
// Add this on top
append : "Free jQuery Plugins<br/>",
// Add this at bottom
prepend : "<br/>jQueryScript.net",
// Manually add form values
manuallyCopyFormValues: true,
// resolves after print and restructure the code for better maintainability
deferred: $.Deferred(),
// timeout
timeout: 250,
// Custom title
title: null,
// Custom document type
doctype: '<!doctype html>'
});
});
شما همچنین یک مثال کامل را به صورت ذیل با نوع های مختلف چاپ در یک صفحه html خواهید داشت:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery.Print</title>
<meta name="description" content="jQuery.print is a plugin for printing specific parts of a page">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/normalize.min.css">
<style type='text/css'>
.a {
background: black;
color: white;
}
.b {
color: #aaa;
}
</style>
<!--[if lt IE 9]>
<script src="js/vendor/html5-3.6-respond-1.1.0.min.js"></script>
<![endif]-->
</head>
<body>
<!--[if lt IE 9]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<h3><a href="https://github.com/DoersGuild/jQuery.print" id="view-on-github" class="btn"><span>View jQuery.print on GitHub</span></a></h3>
<div id="content_holder">
<div id="ele1" class="a">
<h3>Element 1</h3>
<p>
Some random text.
<input type="text" value="Dummy input text" />
</p>
<button class="print-link no-print" onclick="jQuery('#ele1').print()">
Print this (jQuery('#ele1').print())
</button>
</div>
<div id="ele2" class="b">
<h3>Element 2</h3>
<p>
Some other random text.
</p>
<button class="print-link no-print">
Print this ($.print("#ele2")) and skip the button (.no-print)
</button>
</div>
<div id="ele3" class="a">
<h3>Element 3</h3>
<p class="no-print">
Some more random text that is not to be printed.
</p>
<button class="print-link" onclick="jQuery.print('#ele3')">
Print this (jQuery.print('#ele3'))
</button>
</div>
<div id="ele4" class="b">
<h3 class='avoid-this'>Element 4</h3>
<p>
Some really random text.
</p>
<pre><code>
$("#ele4").find('button').on('click', function() {
//Print ele4 with custom options
$("#ele4").print({
//Use Global styles
globalStyles : false,
//Add link with attrbute media=print
mediaPrint : false,
//Custom stylesheet
stylesheet : "http://fonts.googleapis.com/css?family=Inconsolata",
//Print in a hidden iframe
iframe : false,
//Don't print this
noPrintSelector : ".avoid-this",
//Add this at top
prepend : "Hello World!!!<br/>",
//Add this on bottom
append : "<span><br/>Buh Bye!</span>",
//Log to console when printing is done via a deffered callback
deferred: $.Deferred().done(function() { console.log('Printing done', arguments); })
});
});
</code></pre>
<button class="print-link avoid-this">
Print this in a new window, without this button and the title
</button>
</div>
<br/>
<button class="print-link" onclick="jQuery.print()">
Print page - jQuery.print()
</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="../bower_components/jquery/dist/jquery.min.js"><\/script>')
</script>
<script src="../jQuery.print.js"></script>
<script type='text/javascript'>
//<![CDATA[
jQuery(function($) { 'use strict';
$("#ele2").find('.print-link').on('click', function() {
//Print ele2 with default options
$.print("#ele2");
});
$("#ele4").find('button').on('click', function() {
//Print ele4 with custom options
$("#ele4").print({
//Use Global styles
globalStyles : false,
//Add link with attrbute media=print
mediaPrint : false,
//Custom stylesheet
stylesheet : "http://fonts.googleapis.com/css?family=Inconsolata",
//Print in a hidden iframe
iframe : false,
//Don't print this
noPrintSelector : ".avoid-this",
//Add this at top
prepend : "Hello World!!!<br/>",
//Add this on bottom
append : "<span><br/>Buh Bye!</span>",
//Log to console when printing is done via a deffered callback
deferred: $.Deferred().done(function() { console.log('Printing done', arguments); })
});
});
// Fork https://github.com/sathvikp/jQuery.print for the full list of options
});
//]]>
</script>
</body>
</html>
مطالعه درمورد : AJAX (ایجکس) چیست؟
