09-04-2008, 16:37
|
|
|
|
חבר מתאריך: 17.05.05
הודעות: 7,321
|
|
קודם כל, אין לך בכלל מה להסתבך פה כי זה פשוט מאוד.
בוא נתחיל מההתחלה: יש לך עמוד מסוים באתר. אתה רוצה להדפיס חלק ספציפי בעמוד.
נניח שזה קוד האתר שלך:
קוד:
<html>
<head>...</head>
<body>
<div id='siteWrapper'>
<table>
<tr>
<td>...</td>
<td id='dataToPrint'>Text and stuff...(including other tags)</td>
</tr>
</table>
</div>
</body>
</html>
עכשיו מה שצריך זה להדפיס את האלמנט (במקרה שלנו זה ה-td) בעל מאפיין id עם הערך 'dataToPrint'.
ישנן לפחות 2 אפשרויות, כפי שישראל כתב:
ציטוט:
|
במקור נכתב על ידי ישראל K
א. ליצור 2 שכבות ברמה העליונה (בנים מדרגה ראשונה של ה-body), אחת מהם תכיל את כל המסמך והוא יהיה מוסתר עבור הדפסה, האחרת תכיל עותק של האלמנט שברצונך להדפיס ושכבה זו תהיה מוסתרת עבור המסך ומוצגת עבור הדפסה.
ב. בעת לחיצה להדפסה תרוץ פונקציה שתוסיף class כלשהוא לכל אלמנט בנפרד, מלבד לאלמנט הנדרש להדפסה. מחלקה זו היא שתגרום להם להיות מוסתרים עבור הדפסה.
אני מניח שישנן פתרונות נוספים, אבל הרעיון הכללי זהה בכולם. נסה לגרום לכל האלמנטים להיות מוסתרים מלבד לאלו שתחת האלמנט הנדרש להדפסה.
|
כיוון שאתה חדש בעניין הזה, נלך על פיתרון א'.
לכן, עכשיו הקוד של האתר צריך להיראות:
קוד:
<html>
<head>...</head>
<body>
<div id='siteWrapper'>
<div id='visibleToScreen'>
<table>
<tr>
<td>...</td>
<td id='dataToPrint'>Text and stuff...(including other tags)</td>
</tr>
</table>
</div>
<div id='visibleToPrinter'></div>
</div>
</body>
</html>
עכשיו הפיתרון פשוט הרבה יותר, כיוון שרוב העבודה היא באמצעות ה-CSS, ע"י הצעדים הבאים:
1. את ה-div בעל מאפין ה-id עם הערך visibleToScreen תסתיר מהמדפסת, אך תציג למסך המחשב (Screen).
2. את ה-div בעל מאפין ה-id עם הערך visibleToPrinter תציג למדפסת, אך תסתיר ממסך המחשב.
כלומר, שקוד ה-CSS אמור להיות:
קוד:
<style type='text/css'>
@media print
{
*
{
display:none;
visibility:hidden;
}
#siteWrapper,
#visibleToPrinter
{
display:block;
visibility:visible;
}
}
@media screen
{
#visibleToPrinter
{
display:none;
visibility:hidden;
}
}
</style>
כעת מה שנותר זה שבעת לחיצה על לינק ההדפסה, כל המידע שנמצא בתוך ה-div בעל מאפין ה-id עם הערך visibleToScreen יעבור אל div בעל מאפין ה-id עם הערך visibleToPrinter.
זאת עושים בעזרת JS:
קוד:
<script type='text/javascript'>
function print()
{
document.getElementById('visibleToPrinter').innerH TML = document.getElementById('visibleToScreen').innerHT ML;
}
</script>
בסופו של דבר, הקוד הכללי של אתרך אמור להראות בערך כך:
קוד:
<html>
<head>...
<style type='text/css'>
@media print
{
*
{
display:none;
visibility:hidden;
}
#siteWrapper,
#visibleToPrinter
{
display:block;
visibility:visible;
}
}
@media screen
{
#visibleToPrinter
{
display:none;
visibility:hidden;
}
}
</style>
</head>
<body>
<div id='siteWrapper'>
<div id='visibleToScreen'>
<table>
<tr>
<td>...</td>
<td id='dataToPrint'>Text and stuff...(including other tags)</td>
</tr>
</table>
<a href='#' id='thePrintLink'>Print page!</a>
</div>
<div id='visibleToPrinter'></div>
</div>
<script type='text/javascript'>
document.getElementById('thePrintLink').onclick = function()
{
document.getElementById('visibleToPrinter').innerH TML = document.getElementById('visibleToScreen').innerHT ML;
}
</script>
</body>
</html>
בהצלחה |
ראשי
צ'אט
מצב כלאיים
