พิมพ์ <div id =“ printarea”> </div> เท่านั้น?

444

ฉันจะพิมพ์ div ที่ระบุได้อย่างไร (โดยไม่ปิดการใช้งานเนื้อหาอื่น ๆ ทั้งหมดในหน้าด้วยตนเอง)

ฉันต้องการหลีกเลี่ยงกล่องโต้ตอบแสดงตัวอย่างใหม่ดังนั้นการสร้างหน้าต่างใหม่ด้วยเนื้อหานี้ไม่มีประโยชน์

หน้านี้มีตารางสองตารางโดยหนึ่งในนั้นมี div ที่ฉันต้องการพิมพ์ - ตารางได้รับการจัดรูปแบบด้วยสไตล์ภาพสำหรับเว็บซึ่งไม่ควรแสดงในการพิมพ์

— noesgard
แหล่งที่มา

1

stackoverflow.com/questions/2255291/…ลิงก์นี้ใช้งานได้สมบูรณ์แบบ

— Jinna Balu

793

นี่เป็นวิธีแก้ปัญหาทั่วไปโดยใช้CSS เท่านั้นซึ่งฉันได้ตรวจสอบแล้วว่าใช้ได้

@media print {
  body * {
    visibility: hidden;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}

วิธีการทางเลือกนั้นไม่ค่อยดีนัก การใช้displayเป็นเรื่องยุ่งยากเพราะหากองค์ประกอบใด ๆdisplay:noneไม่มีลูกหลานของมันจะแสดงอย่างใดอย่างหนึ่ง ในการใช้งานคุณจะต้องเปลี่ยนโครงสร้างของหน้า

การใช้visibilityงานได้ดีขึ้นเนื่องจากคุณสามารถเปิดการมองเห็นลูกหลาน องค์ประกอบที่มองไม่เห็นยังคงมีผลกับเลย์เอาต์ดังนั้นฉันจึงย้ายsection-to-printไปด้านบนซ้ายเพื่อให้พิมพ์ได้อย่างถูกต้อง

— Bennett McElwee
แหล่งที่มา

21

นี่เป็นวิธีที่เร็วและสะอาดที่สุดฉันสงสัยว่าทำไมคำตอบนี้จึงไม่ได้รับการโหวตมากที่สุด -.

— Dany Khalife

34

ปัญหาที่ต้องระวังด้วยวิธีนี้คือคุณสามารถพิมพ์หน้าเปล่าหลายพันหน้าในบางกรณี ในกรณีของฉันฉันสามารถแก้ปัญหานี้ได้โดยใช้จอแสดงผลเพิ่มเติม: ไม่มีสไตล์สำหรับรายการที่เลือก แต่อาจเป็นวิธีการแก้ปัญหาทั่วไปที่มากขึ้นโดยการรวมกันของการบังคับความสูง, ล้น: ไม่มีและการวางตำแหน่งแน่นอนสำหรับ divs หรือบางสิ่งบางอย่าง

— Malcolm MacLeod

5

นี่เป็นการเริ่มต้นที่ดี แต่ฉันมีปัญหาสองประการ: สำหรับหนึ่งในกรณีที่ผู้ปกครองขององค์ประกอบสร้างการวางตำแหน่งแบบสัมพันธ์ / สัมบูรณ์ของตนเองเนื้อหาจะยังคงถูกชดเชยเว้นแต่ฉันจะใช้position:fixedแทน อย่างไรก็ตาม Chrome และ Safari จะตัดทอนเนื้อหาโดยเฉพาะหลังจากหน้าแรก ดังนั้นการแก้ปัญหาครั้งสุดท้ายของฉันคือการกำหนดทั้งเป้าหมายและ ผู้ปกครองทั้งหมดให้เป็นoverflow:visible; position:absolute !important; top:0;left:0

— natevw

1

@ dudeNumber4 #section-to-printตรงกับส่วนนั้น #section-to-print *จับคู่แต่ละองค์ประกอบย่อยของส่วน ดังนั้นกฎนั้นเพียงแค่ทำให้ส่วนและเนื้อหาทั้งหมดของมันปรากฏ

— Bennett McElwee

3

คุณสามารถลองใช้โซลูชัน JavaScript แต่ไม่สามารถใช้งานได้หากผู้ใช้ของคุณใช้คำสั่งพิมพ์ของเบราว์เซอร์

— Bennett McElwee

243

ฉันมีทางออกที่ดีกว่าด้วยรหัสน้อยที่สุด

วางส่วนที่พิมพ์ได้ของคุณลงใน div ด้วย id ดังนี้:

<div id="printableArea">
      <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

จากนั้นเพิ่มกิจกรรมเช่น onclick (ดังที่แสดงด้านบน) และส่งรหัสของ div อย่างที่ฉันทำไว้ด้านบน

ตอนนี้เรามาสร้างจาวาสคริปต์ง่ายๆ

function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}

สังเกตว่ามันง่ายแค่ไหน? ไม่มีป๊อปอัปไม่มีหน้าต่างใหม่ไม่มีสไตล์ที่บ้าคลั่งไม่มีไลบรารี JS เช่น jquery ปัญหากับการแก้ปัญหาที่ซับซ้อนมาก (คำตอบไม่ซับซ้อนและไม่ใช่สิ่งที่ฉันอ้างถึง) คือความจริงที่ว่ามันจะไม่แปลในทุกเบราว์เซอร์เลยทีเดียว! หากคุณต้องการทำให้สไตล์แตกต่างให้ทำตามที่แสดงในคำตอบที่เลือกโดยเพิ่มแอ็ตทริบิวต์สื่อให้กับลิงก์สไตล์ชีท (media = "print")

ไม่มีขุยเบามันแค่ใช้งานได้

— เควินฟลอริด้า
แหล่งที่มา

@Kevin ฉันลองใช้แบบฟอร์มนี้ แต่มันพิมพ์แบบฟอร์มเปล่า (ไม่มีข้อมูล) และฉันต้องการแบบฟอร์มที่จะกรอกก่อนส่ง

— Arif

98

@asprin คำเตือน! นี่ไม่ใช่รหัสฟรี การใช้ innerHTML เพื่อล้างข้อมูลจากนั้นสร้างเนื้อหาทั้งหมดใหม่ให้เป็นหน้ากระดาษธรรมดา แต่ด้วยการปรับแต่งขั้นสูงกว่า (เมนูสไลด์โชว์ ฯลฯ ) มันสามารถลบพฤติกรรมแบบไดนามิกที่เพิ่มโดยสคริปต์อื่น ๆ

— Christophe

17

โซลูชันนี้จะไม่ทำงานในหน้าซับซ้อนใด ๆ ที่องค์ประกอบในพื้นที่ที่พิมพ์ได้ขึ้นอยู่กับสไตล์และ / หรือตำแหน่งขององค์ประกอบหลัก หากคุณแยก div ที่พิมพ์ได้ออกมามันอาจดูแตกต่างไปจากเดิมอย่างสิ้นเชิงเพราะตอนนี้พ่อแม่ทั้งหมดหายไป

— Andrei Volgin

1

น่าเศร้าที่ไม่ทำงานได้ดีใน Chrome ถ้าคุณปิดหน้าต่างตัวอย่างก่อนพิมพ์แล้วพยายามที่จะทำ .clickjQuery มันเป็นความอัปยศเพราะรหัสนั้นมีน้ำหนักเบามาก

— rybo111

3

@ BorisGappov เป็นตัวอย่างที่ง่ายมาก ๆ ด้วยการคลิกเพียงครั้งเดียวเพื่อพิสูจน์จุดของฉัน: jsfiddle.net/dc7voLztฉันจะพูดอีกครั้ง: นี่ไม่ใช่รหัสที่ปราศจากระเบียบ! ปัญหาไม่ได้อยู่ที่การพิมพ์ แต่เป็นการคืนค่าหน้าเดิม!

— Christophe

121

ทุกคำตอบเพื่อให้ห่างไกลมีข้อบกพร่องสวย - พวกเขาทั้งสองเกี่ยวข้องกับการเพิ่มclass="noprint"ทุกอย่างหรือจะเลอะภายในdisplay#printable

ฉันคิดว่าทางออกที่ดีที่สุดคือการสร้างเสื้อคลุมรอบ ๆ สิ่งที่ไม่สามารถพิมพ์ได้:

<head>
    <style type="text/css">

    #printable { display: none; }

    @media print
    {
        #non-printable { display: none; }
        #printable { display: block; }
    }
    </style>
</head>
<body>
    <div id="non-printable">
        Your normal page contents
    </div>

    <div id="printable">
        Printer version
    </div>
</body>

แน่นอนว่ามันไม่สมบูรณ์แบบเพราะมันเกี่ยวข้องกับการเคลื่อนย้ายสิ่งต่าง ๆ ใน HTML ของคุณเล็กน้อย ...

— เกร็ก
แหล่งที่มา

ฉันคิดว่าคุณพูดถูก แต่ฉันจะกำจัดสไตล์ของตารางโดยรอบ div ได้อย่างไร (ถ้าเป็นไปได้ที่จะลบสไตล์ - ฉันสามารถพิมพ์ตารางและแยกส่วนที่เหลือของเนื้อหาออกได้อย่างง่ายดาย

— noesgard

ฉันใช้ Javascript รถกระบะเนื้อหาที่จำเป็นและ CSS เช่นเหนือ

— noesgard

9

ฉันชอบใช้ semantic HTML การจัดรูปแบบการพิมพ์ควรได้รับการจัดการโดย CSS ดูคำตอบของฉันสำหรับวิธีการทำเช่นนี้: stackoverflow.com/questions/468881/…

— Bennett McElwee

เห็นด้วยกับเบนเน็ตต์การใช้การมองเห็นแทนการแสดงผลเป็นวิธีที่สะอาดกว่ามาก

— guigouz

ฉันได้แก้ปัญหาอย่างง่าย ๆ ที่ต่ำกว่าในหัวข้อนี้ซึ่งฉันคิดว่าจะเหมาะกับความต้องการของผู้ถามดีกว่า ไม่พึ่งพาสไตล์การพิมพ์สามารถนำกลับมาใช้ใหม่ได้ทั่วทั้งเว็บไซต์ของคุณและมีน้ำหนักเบาอย่างไม่น่าเชื่อ

— เควินฟลอริด้า

108

ด้วย jQuery มันง่ายอย่างนี้

w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();

— romaninsh
แหล่งที่มา

3

นี่มันเจ๋งทีเดียว แต่มันก็ปรากฏใน Chrome ว่าเป็นป๊อปอัปที่ถูกบล็อก

— Rafi Jacoby

8

เคล็ดลับคือการเรียกมันในเหตุการณ์ที่ผู้ใช้สร้างขึ้นเช่นเมื่อคลิกเมาส์ คุณสามารถเพิ่มหลังจากบรรทัดแรก: หาก (! w) การแจ้งเตือน ('โปรดเปิดใช้งานป๊อปอัป');

— romaninsh

1

มีใครได้ทำงานนี้ใน IE11? มันเพิ่งเปิดหน้าต่างจากนั้นปิดทันที ใช้งานได้ทั้งใน Chrome, FF และซาฟารี

— greatwitenorth

3

ฉันสูญเสีย CSS ในขณะที่พิมพ์ด้วยสิ่งนี้มีวิธีการรักษา CSS หรือไม่?

— Moxet Khan

2

@MoxetKhan โพสต์นี้มีทางออกด้วย css vevlo.com/how-to-print-div-content-using-javascript

— lakesare

22

คุณสามารถใช้สไตล์ชีทการพิมพ์และใช้ CSS เพื่อจัดเรียงเนื้อหาที่คุณต้องการพิมพ์ได้หรือไม่ อ่านบทความนี้สำหรับคำแนะนำเพิ่มเติม

— พอลดิกซัน
แหล่งที่มา

ฉันจะมีแผ่นลักษณะการพิมพ์ - พยายามที่จะหลีกเลี่ยงการวางกฎสไตล์ในเนื้อหาอื่น ๆ ทั้งหมด ...

— noesgard

ฉันมีตารางที่มีการจัดแต่งทรงผมโดยมีคำถามต่อ div ถ้าฉันตั้งตารางให้แสดง: ไม่มี - ฉันยังสามารถแสดง div ได้หรือไม่

— noesgard

ฉันคิดว่าใช่และคุณสามารถลองทำเครื่องหมายกฎเป็น! สำคัญเพื่อเพิ่มมัน!

— Paul Dixon

หากตารางไม่ปรากฏขึ้นจะไม่มีผลแม้ว่า div จะถูกตั้งค่าเป็น 'display: awesome;' ผู้ปกครองถูกซ่อนอยู่และเด็ก ๆ นี่เป็นสถานการณ์ที่คุณต้องการตารางหรือเป็นเพียงการจัดวางหน้ากระดาษหรือไม่?

— roborourke

"บูมหัว!" ตามรูปแบบตาราง = |

— Aneves

19

วิธีนี้ใช้ได้ดี:

<style type="text/css">
@media print
{
body * { visibility: hidden; }
#printcontent * { visibility: visible; }
#printcontent { position: absolute; top: 40px; left: 30px; }
}
</style>

โปรดทราบว่าสิ่งนี้ใช้ได้กับ "การมองเห็น" เท่านั้น "แสดง" จะไม่ทำ ทดสอบใน FF3

— Christian Maioli M.
แหล่งที่มา

15

ฉันไม่ชอบคำตอบเหล่านี้ทั้งหมด หากคุณมีคลาส (พูดว่า printableArea) และมีความเป็นลูกของร่างกายในทันทีคุณสามารถทำสิ่งนี้ใน CSS การพิมพ์ของคุณ:

body > *:not(.printableArea) {
    display: none;
}

//Not needed if already showing
body > .printableArea {
    display: block;
}

สำหรับผู้ที่กำลังมองหา printableArea ในสถานที่อื่นคุณจะต้องตรวจสอบให้แน่ใจว่าผู้ปกครองของ printableArea แสดงอยู่:

body > *:not(.parentDiv),
.parentDiv > *:not(.printableArea) {
    display: none;
}

//Not needed if already showing
body > .printableArea {
    display: block;
}

การใช้การมองเห็นอาจทำให้เกิดปัญหาการเว้นวรรคและหน้าว่างได้เป็นจำนวนมาก นี่เป็นเพราะการมองเห็นรักษาพื้นที่องค์ประกอบเพียงทำให้มันถูกซ่อนซึ่งในขณะที่จอแสดงผลลบออกและอนุญาตให้องค์ประกอบอื่น ๆ ใช้พื้นที่ของมัน

เหตุผลที่โซลูชันนี้ใช้งานได้คือคุณไม่ได้คว้าองค์ประกอบทั้งหมดเพียงแค่เด็ก ๆ ในร่างกายและซ่อนไว้ โซลูชันอื่นด้านล่างพร้อมจอแสดงผล css ซ่อนองค์ประกอบทั้งหมดซึ่งมีผลต่อทุกสิ่งที่อยู่ภายในเนื้อหา printableArea

ฉันจะไม่แนะนำ javascript เนื่องจากคุณจะต้องมีปุ่มพิมพ์ที่ผู้ใช้คลิกและปุ่มพิมพ์ของเบราว์เซอร์มาตรฐานจะไม่มีผลเหมือนกัน หากคุณต้องทำสิ่งนั้นจริง ๆ สิ่งที่ฉันจะทำคือเก็บเนื้อหา html เอาองค์ประกอบที่ไม่ต้องการทั้งหมดพิมพ์แล้วเพิ่ม html กลับ ตามที่กล่าวถึงแม้ว่าฉันจะหลีกเลี่ยงสิ่งนี้หากคุณสามารถและใช้ตัวเลือก CSS เช่นด้านบน

หมายเหตุ: คุณสามารถเพิ่ม CSS ใด ๆ ลงใน CSS พิมพ์โดยใช้รูปแบบอินไลน์:

<style type="text/css">
@media print {
   //styles here
}
</style>

หรืออย่างที่ฉันมักใช้เป็นลิงค์แท็ก:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

— fanfavorite
แหล่งที่มา

เกิดอะไรขึ้นถ้า div ที่คุณต้องการพิมพ์ไม่ใช่ "ลูกที่เกิดจากร่างกายทันที"? ฉันพยายามทำสิ่งนี้ใน vue.js .. แต่ฉันได้รับหน้าเปล่าจำนวนมากเมื่อใช้คำตอบที่ยอมรับได้

— svenema

@svenema คุณสามารถใช้ CSS ที่คุณต้องการ นี่เป็นเพียงตัวอย่าง

— fanfavorite

hmm ยังคงเมื่อฉันลองนี้ไม่มีหน้าว่างเพิ่มเติมจริง ๆ แต่ div printableArea ก็ไม่แสดงเช่นกัน ฉันเพิ่งมีหน้าว่าง 1 หน้าเมื่อฉันใช้รหัสนี้

— svenema

ฉันพบว่ามันเป็นเพราะ div ที่สามารถพิมพ์ได้ไม่ใช่ลูกโดยตรงของแท็กเนื้อเมื่อฉันทำให้มันเป็นลูกโดยตรงวิธีการแก้ปัญหาของคุณทำงาน; อย่างไรก็ตามในกรณีของฉันฉันไม่สามารถทำให้ printableArea เป็นลูกโดยตรงได้ มีวิธีแก้ไขไหม?

— svenema

@svenema โปรดดูการแก้ไขของฉันด้านบน

— fanfavorite

8

printMeให้สิ่งที่องค์ประกอบที่คุณต้องการพิมพ์ประชาชนได้

รวมสคริปต์นี้ไว้ในแท็กหัวของคุณ:

<script language="javascript">
    var gAutoPrint = true;

    function processPrint(){

    if (document.getElementById != null){
    var html = '<HTML>\n<HEAD>\n';
    if (document.getElementsByTagName != null){
    var headTags = document.getElementsByTagName("head");
    if (headTags.length > 0) html += headTags[0].innerHTML;
    }

    html += '\n</HE' + 'AD>\n<BODY>\n';
    var printReadyElem = document.getElementById("printMe");

    if (printReadyElem != null) html += printReadyElem.innerHTML;
    else{
    alert("Error, no contents.");
    return;
    }

    html += '\n</BO' + 'DY>\n</HT' + 'ML>';
    var printWin = window.open("","processPrint");
    printWin.document.open();
    printWin.document.write(html);
    printWin.document.close();

    if (gAutoPrint) printWin.print();
    } else alert("Browser not supported.");

    }
</script>

เรียกใช้ฟังก์ชัน

<a href="javascript:void(processPrint());">Print</a>

— Jason Plank
แหล่งที่มา

นี่เป็นงานที่ดี แต่มันซับซ้อนเกินไปและจะไม่ทำงานอย่างถูกต้องข้ามเบราว์เซอร์ (โดยเฉพาะเบราว์เซอร์ที่เก่ากว่า) ฉันขอแนะนำให้คุณดูโซลูชันของฉันด้านล่าง

— เควินฟลอริด้า

6

hm ... ใช้ประเภทของ stylsheet สำหรับการพิมพ์ ... เช่น:

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

print.css:

div { display: none; }
#yourdiv { display: block; }

— Andreas Niedermair
แหล่งที่มา

สิ่งนี้จะไม่ทำงานหากเอกสารไม่ได้ใช้ DIV หรือ #yourdiv รวมถึง DIV เพิ่มเติมด้วย

— Gumbo

#yourdiv * {display: ... } หากคุณวางสิ่งนี้ไว้ที่ด้านบนของหน้าและมีเบราว์เซอร์ที่เป็นปัจจุบันคุณสามารถทำงานร่วมกับตัวเลือกอื่น ๆ เพื่อซ่อนตัวไม่ใช่ div

— Andreas Niedermair

"#yourdiv * {display: ... }" - สิ่งที่ ... ควรจะไม่มีโครงร่างหรือไม่

— เกร็ก

สิ่งนี้จะแสดงองค์ประกอบแบบอินไลน์เช่นเดียวกับองค์ประกอบบล็อก แต่“ #yourdiv ของคุณ #yourdiv div {display: block}” จะทำเช่นนั้น

— ต้นกระเจี๊ยบ

@dittodhole - ลองคิดดูสักครู่ คุณสามารถใส่อะไรลงไปที่นั่นเพื่อไม่ให้เลย์เอาต์ภายใน #yourdiv ของคุณ?

— Greg

6

<script type="text/javascript">
   function printDiv(divId) {
       var printContents = document.getElementById(divId).innerHTML;
       var originalContents = document.body.innerHTML;
       document.body.innerHTML = "<html><head><title></title></head><body>" + printContents + "</body>";
       window.print();
       document.body.innerHTML = originalContents;
   }
</script>

— Dilip Kr Singh
แหล่งที่มา

6

ดูดี แต่คุณหลวมผูกจาวาสคริปต์และอื่น ๆ หลังจากการพิมพ์

— Julien

1

มันกำลังพิมพ์โดยไม่ css

— Moxet Khan

6

ขั้นตอนที่ 1: เขียนจาวาสคริปต์ต่อไปนี้ในแท็กหัวของคุณ

<script language="javascript">
function PrintMe(DivID) {
var disp_setting="toolbar=yes,location=no,";
disp_setting+="directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
   var content_vlue = document.getElementById(DivID).innerHTML;
   var docprint=window.open("","",disp_setting);
   docprint.document.open();
   docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');
   docprint.document.write('"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
   docprint.document.write('<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">');
   docprint.document.write('<head><title>My Title</title>');
   docprint.document.write('<style type="text/css">body{ margin:0px;');
   docprint.document.write('font-family:verdana,Arial;color:#000;');
   docprint.document.write('font-family:Verdana, Geneva, sans-serif; font-size:12px;}');
   docprint.document.write('a{color:#000;text-decoration:none;} </style>');
   docprint.document.write('</head><body onLoad="self.print()"><center>');
   docprint.document.write(content_vlue);
   docprint.document.write('</center></body></html>');
   docprint.document.close();
   docprint.focus();
}
</script>

ขั้นตอนที่ 2: เรียกใช้ฟังก์ชัน PrintMe ('DivID') โดยเหตุการณ์ onclick

<input type="button" name="btnprint" value="Print" onclick="PrintMe('divid')"/>
<div id="divid">
here is some text to print inside this div with an id 'divid'
</div>

— Hardik Thaker
แหล่งที่มา

นี่คือหนึ่ง! ใช้สำหรับ Modal และคลังภาพ ไม่มีข้อผิดพลาด Javascript หลังจากปิด มีประโยชน์จริง ๆ โดยเฉพาะอย่างยิ่งเมื่อคุณใช้ modals ซึ่งยาวกว่าหนึ่งหน้า ห่ออย่างดี เหมาะสำหรับผู้ที่ต้องการพิมพ์เพื่อจัดเก็บ

— TheWeeezel

2

ด้วย CSS 3 คุณสามารถใช้สิ่งต่อไปนี้:

body *:not(#printarea) {
    display: none;
}

— ต้นกระเจี๊ยบ
แหล่งที่มา

ไม่สามารถใช้ที่ฉันกลัว ... (ผมที่ถูกต้องหากผิด) หน้าฉันทำงานเป็น asp.net 1.1 / DHTML

— noesgard

ขึ้นอยู่กับเบราว์เซอร์ว่าตัวเลือก: ไม่ () มีอยู่แล้วหรือไม่

— Gumbo

ถ้าอย่างนั้นข้อเสนอของฉันคือการมองไปสู่อนาคต…ไม่จริงจัง ฉันเพิ่งพูดถึงมันเพื่อความสมบูรณ์ ฉันรู้ว่ามันไม่สามารถปฏิบัติได้ในขณะนี้ น่าเสียดาย.

— Gumbo

คุณสามารถใช้ jQuery และตัวเลือกนี้ (ฉันคิดว่า) จะทำงานใน IE6 - $ ('body *: not (#printarea)'). style ('display', 'none');

— David Heggie

2

สิ่งนี้จะซ่อนผู้สืบทอดทั้งหมดของ #printarea เนื่องจากตรงกับ *: ไม่ใช่ (#printarea) โดยพื้นฐานแล้วคุณจะได้ภาชนะที่ว่างเปล่า

— cytofu

2

ฉันหยิบเนื้อหาโดยใช้ JavaScript และสร้างหน้าต่างที่ฉันสามารถพิมพ์แทน ...

— noesgard
แหล่งที่มา

คุณแชร์รหัสได้หรือไม่มันมีปัญหาการนำ css ไปใช้

— Moxet Khan

2

วิธีการของ Sandro นั้นใช้งานได้ดี

ฉัน tweaked เพื่อให้อนุญาตให้มีการเชื่อมโยงหลาย printMe โดยเฉพาะอย่างยิ่งที่จะใช้ในหน้าแท็บและขยายข้อความ

function processPrint(printMe){ <- เรียกตัวแปรที่นี่

var printReadyElem = document.getElementById(printMe); <- ลบเครื่องหมายคำพูดรอบ printMe เพื่อขอตัวแปร

<a href="javascript:void(processPrint('divID'));">Print</a><- ส่งรหัส div ที่จะพิมพ์ไปยังฟังก์ชันเพื่อเปลี่ยนตัวแปร printMe ให้เป็น div ID ต้องการอัญประกาศเดี่ยว

2

printDiv (divId) : ทางออกทั่วไปเพื่อพิมพ์ div ใด ๆ ในหน้าใด ๆ

ฉันมีปัญหาที่คล้ายกัน แต่ฉันต้องการ (a) สามารถพิมพ์ทั้งหน้าหรือ (b) พิมพ์หนึ่งในหลาย ๆ พื้นที่ที่เฉพาะเจาะจง วิธีการแก้ปัญหาของฉันขอบคุณมากข้างต้นช่วยให้คุณระบุวัตถุ div ใด ๆ ที่จะพิมพ์

กุญแจสำคัญสำหรับการแก้ปัญหานี้คือการเพิ่มกฎที่เหมาะสมลงในสไตล์ชีทสื่อสิ่งพิมพ์เพื่อให้ div (และเนื้อหา) ที่ร้องขอถูกพิมพ์

ก่อนอื่นให้สร้าง css การพิมพ์ที่จำเป็นเพื่อระงับทุกอย่าง (แต่ไม่มีกฎเฉพาะเพื่ออนุญาตองค์ประกอบที่คุณต้องการพิมพ์)

<style type="text/css" media="print">
   body {visibility:hidden; }
   .noprintarea {visibility:hidden; display:none}
   .noprintcontent { visibility:hidden; }
   .print { visibility:visible; display:block; }
</style>

โปรดทราบว่าฉันได้เพิ่มกฎระดับใหม่:

noprintareaช่วยให้คุณระงับการพิมพ์องค์ประกอบภายในแผนกของคุณทั้งเนื้อหาและบล็อก
noprintcontentช่วยให้คุณสามารถระงับการพิมพ์องค์ประกอบภายใน div ของคุณเนื้อหาถูกระงับ แต่และพื้นที่ที่ถูกจัดสรรว่างเปล่า
การพิมพ์ช่วยให้คุณมีรายการที่แสดงในเวอร์ชันที่พิมพ์ แต่ไม่ปรากฏบนหน้าจอ โดยปกติจะมี "display: none" สำหรับรูปแบบหน้าจอ

จากนั้นแทรกฟังก์ชัน JavaScript สามรายการ สิ่งแรกที่ทำคือเปิดและปิดสไตล์ชีตสื่อสิ่งพิมพ์

function disableSheet(thisSheet,setDisabled)
{ document.styleSheets[thisSheet].disabled=setDisabled; }

ที่สองทำงานจริงและที่สามทำความสะอาดหลังจากนั้น ที่สอง (printDiv) เปิดใช้งานสไตล์ชีตสื่อสิ่งพิมพ์จากนั้นผนวกกฎใหม่เพื่อให้ div ที่ต้องการพิมพ์ออกพิมพ์และเพิ่มความล่าช้าก่อนการดูแลขั้นสุดท้าย (มิฉะนั้นสามารถรีเซ็ตสไตล์ก่อนที่จะพิมพ์จริง ๆ ทำ.)

function printDiv(divId)
{
  //  Enable the print CSS: (this temporarily disables being able to print the whole page)
  disableSheet(0,false);
  //  Get the print style sheet and add a new rule for this div
  var sheetObj=document.styleSheets[0];  
  var showDivCSS="visibility:visible;display:block;position:absolute;top:30px;left:30px;";
  if (sheetObj.rules) { sheetObj.addRule("#"+divId,showDivCSS); }
  else                { sheetObj.insertRule("#"+divId+"{"+showDivCSS+"}",sheetObj.cssRules.length); }
  print();
  //  need a brief delay or the whole page will print
  setTimeout("printDivRestore()",100);  
}

ฟังก์ชั่นสุดท้ายลบกฎที่เพิ่มและตั้งค่าสไตล์การพิมพ์อีกครั้งเพื่อปิดการใช้งานเพื่อให้ทั้งหน้าสามารถพิมพ์ได้

function printDivRestore()
{
  // remove the div-specific rule
  var sheetObj=document.styleSheets[0];  
  if (sheetObj.rules) { sheetObj.removeRule(sheetObj.rules.length-1); }
  else                { sheetObj.deleteRule(sheetObj.cssRules.length-1); }
  //  and re-enable whole page printing
  disableSheet(0,true);
}

สิ่งเดียวที่ต้องทำคือการเพิ่มหนึ่งบรรทัดในการประมวลผล onload ของคุณเพื่อให้รูปแบบการพิมพ์ถูกปิดใช้งานในขั้นต้นซึ่งจะช่วยให้สามารถพิมพ์ได้ทั้งหน้า

<body onLoad='disableSheet(0,true)'>

จากนั้นในเอกสารของคุณคุณสามารถพิมพ์ div เพียงแค่พิมพ์ printDiv ("thedivid") จากปุ่มหรืออะไรก็ตาม

ข้อดีที่ยิ่งใหญ่สำหรับวิธีนี้คือโซลูชันทั่วไปในการพิมพ์เนื้อหาที่เลือกจากภายในหน้า นอกจากนี้ยังอนุญาตให้ใช้สไตล์ที่มีอยู่สำหรับองค์ประกอบที่พิมพ์ - รวมถึง div ที่มี

หมายเหตุ: ในการใช้งานของฉันนี้จะต้องเป็นสไตล์ชีตแรก เปลี่ยนการอ้างอิงชีต (0) เป็นหมายเลขชีตที่เหมาะสมหากคุณต้องการใช้ภายหลังในลำดับชีต

— DrDave
แหล่งที่มา

2

@Kevin Florida หากคุณมีหลาย divs ในคลาสเดียวกันคุณสามารถใช้มันได้เช่นนี้:

 <div style="display:none">
   <div id="modal-2" class="printableArea">
     <input type="button" class="printdiv-btn" value="print a div!" />
   </div>
 </div>

ฉันใช้ประเภทเนื้อหาภายใน Colorbox

$(document).on('click', '.printdiv-btn', function(e) {
    e.preventDefault();

    var $this = $(this);
    var originalContent = $('body').html();
    var printArea = $this.parents('.printableArea').html();

    $('body').html(printArea);
    window.print();
    $('body').html(originalContent);
});

— สเตฟาน
แหล่งที่มา

2

ในกรณีของฉันฉันต้องพิมพ์ภาพภายในหน้า เมื่อฉันใช้วิธีการโหวตฉันมีหน้าว่าง 1 หน้าและอีกหน้าหนึ่งแสดงรูปภาพ หวังว่ามันจะช่วยใครซักคน

นี่คือ CSS ที่ฉันใช้:

@media print {
  body * {
    visibility: hidden;
  }

  #not-print * {
    display: none;
  }

  #to-print, #to-print * {
    visibility: visible;
  }

  #to-print {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 99%;
  }
}

html ของฉันคือ:

<div id="not-print" >
  <header class="row wrapper page-heading">

  </header>

  <div class="wrapper wrapper-content">
    <%= image_tag @qrcode.image_url,  size: "250x250" , alt: "#{@qrcode.name}" %>
  </div>
</div>

<div id="to-print" style="display: none;">
  <%= image_tag @qrcode.image_url,  size: "300x300" , alt: "#{@qrcode.name}" %>
</div>

— Raphael Monteiro
แหล่งที่มา

2

CSS ที่ดีที่สุดเพื่อให้พอดีกับพื้นที่ว่างสูง:

@media print {
  body * {
    visibility: hidden;
    height:0;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
    height:auto;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}

— TRI ÂN
แหล่งที่มา

2

วิธีที่ดีที่สุดในการพิมพ์ Div หรือองค์ประกอบใด ๆ โดยเฉพาะ

printDiv("myDiv");

function printDiv(id){
        var printContents = document.getElementById(id).innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
}

— Mahetab
แหล่งที่มา

1

ใช้สไตล์ชีทพิเศษสำหรับการพิมพ์

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

จากนั้นเพิ่มคลาสเช่น "noprint" ในทุกแท็กที่มีเนื้อหาที่คุณไม่ต้องการพิมพ์

ในการใช้ CSS

.noprint {
  display: none;
}

— Xn0vv3r
แหล่งที่มา

1

หากคุณต้องการพิมพ์ div นี้คุณต้องใช้คำสั่ง:

@media print{
    *{display:none;}
    #mydiv{display:block;}
}

— Jason Plank
แหล่งที่มา

1

ฟังก์ชัน printDiv () ออกมาสองสามครั้ง แต่ในกรณีนี้คุณจะสูญเสียองค์ประกอบการเชื่อมโยงและค่าอินพุตทั้งหมด ดังนั้นทางออกของฉันคือการสร้าง div สำหรับทุกสิ่งที่เรียกว่า "body_allin" และอีกอันที่อยู่นอกอันแรกเรียกว่า "body_print"

จากนั้นคุณเรียกใช้ฟังก์ชันนี้:

function printDiv(divName){

    var printContents = document.getElementById(divName).innerHTML;

    document.getElementById("body_print").innerHTML = printContents;

    document.getElementById("body_allin").style.display = "none";
    document.getElementById("body_print").style.display = "";

    window.print();

    document.getElementById("body_print").innerHTML = "";
    document.getElementById("body_allin").style.display = "";
    document.getElementById("body_print").style.display = "none";

}

— pmrotule
แหล่งที่มา

บรรทัดนี้อาจมีประโยชน์หากคุณต้องการ id ที่ไม่ซ้ำ: printContents = printContents.replace (/ id = ("| ') (. *?) (" |') / g, 'id = $ 1 $ 2_2 $ 3');

— pmrotule

1

คุณสามารถใช้สไตล์ CSS แยกต่างหากซึ่งจะปิดการใช้งานเนื้อหาอื่น ๆ ยกเว้นสไตล์ที่มี id "printarea"

ดูการออกแบบ CSS: ไปที่การพิมพ์สำหรับคำอธิบายและตัวอย่างเพิ่มเติม

— Kosi2801
แหล่งที่มา

อัปเดตลิงก์ไปยังตำแหน่งใหม่ ความคิดเห็นแทน downvote น่าจะดี

— Kosi2801

1

ฉันมีภาพหลายภาพแต่ละภาพด้วยปุ่มและจำเป็นต้องคลิกที่ปุ่มเพื่อพิมพ์แต่ละ div ด้วยภาพ วิธีนี้ใช้ได้ผลถ้าฉันปิดการใช้งานแคชในเบราว์เซอร์และขนาดภาพไม่เปลี่ยนแปลงใน Chrome:

        function printDiv(divName) {

        var printContents = document.getElementById(divName).innerHTML;
        w = window.open();

        w.document.write(printContents);
        w.document.write('<scr' + 'ipt type="text/javascript">' + 'window.onload = function() { window.print(); window.close(); };' + '</sc' + 'ript>');

        w.document.close(); // necessary for IE >= 10
        w.focus(); // necessary for IE >= 10

        return true;
    }

<div id="printableArea">
      <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

— ชีวิตความรัก
แหล่งที่มา

1

อีกหนึ่งการอนุมัติโดยไม่กระทบกับหน้าปัจจุบันและยังคงอยู่ css ในขณะที่พิมพ์ ตัวเลือกที่นี่จะต้องเป็นตัวเลือก div เฉพาะซึ่งเนื้อหาใดที่เราต้องการพิมพ์

printWindow(selector, title) {
   var divContents = $(selector).html();
   var $cssLink = $('link');
   var printWindow = window.open('', '', 'height=' + window.outerHeight * 0.6 + ', width=' + window.outerWidth  * 0.6);
   printWindow.document.write('<html><head><h2><b><title>' + title + '</title></b></h2>');
   for(var i = 0; i<$cssLink.length; i++) {
    printWindow.document.write($cssLink[i].outerHTML);
   }
   printWindow.document.write('</head><body >');
   printWindow.document.write(divContents);
   printWindow.document.write('</body></html>');
   printWindow.document.close();
   printWindow.onload = function () {
            printWindow.focus();
            setTimeout( function () {
                printWindow.print();
                printWindow.close();
            }, 100);  
        }
}

ที่นี่ให้หมดเวลาแสดงว่าภายนอก css ได้นำไปใช้กับมัน

— Mukesh Kumar Suman
แหล่งที่มา

บางครั้ง CSS ต้องใช้เวลาในการโหลดวิธีการนี้เป็นสิ่งที่ฉันต้องการโหลดหน้าเว็บซ้ำก่อนที่จะพิมพ์ ขอบคุณ

— Arpit Shrivastava

1

ฉันลองใช้วิธีแก้ปัญหามากมายที่ให้ไว้ไม่มีการทำงานอย่างสมบูรณ์ พวกเขาสูญเสีย CSS หรือ JavaScript รวม ฉันพบโซลูชันที่สมบูรณ์แบบและใช้งานง่ายที่ไม่ทำให้ CSS และ JavaScript เสียหาย

HTML:

<div id='printarea'>
    <p>This is a sample text for printing purpose.</p>
    <input type='button' id='btn' value='Print' onclick='printFunc();'>
</div>
<p>Do not print.</p>

javascript:

function printFunc() {
    var divToPrint = document.getElementById('printarea');
    var htmlToPrint = '' +
        '<style type="text/css">' +
        'table th, table td {' +
        'border:1px solid #000;' +
        'padding;0.5em;' +
        '}' +
        '</style>';
    htmlToPrint += divToPrint.outerHTML;
    newWin = window.open("");
    newWin.document.write("<h3 align='center'>Print Page</h3>");
    newWin.document.write(htmlToPrint);
    newWin.print();
    newWin.close();
    }

— BibanCS
แหล่งที่มา

การเปิดและการสร้างหน้าต่างอื่นที่ไม่สามารถใช้งานได้บน Android ใช้งานได้โดยตรง window.print () ใช้งานได้

— Merv

1

ฉันไปงานเลี้ยงสายนี้มาก แต่ฉันอยากจะลองอีกวิธีหนึ่ง ฉันเขียนโมดูล JavaScript ตัวจิ๋วที่เรียกว่าPrintElementsสำหรับการพิมพ์ส่วนต่างๆของเว็บเพจแบบไดนามิก

มันทำงานได้โดยการวนซ้ำผ่านองค์ประกอบของโหนดที่เลือกและสำหรับแต่ละโหนดมันจะสำรวจต้นไม้ DOM จนกระทั่งองค์ประกอบ BODY ในแต่ละระดับรวมถึงระดับเริ่มต้น (ซึ่งเป็นระดับของโหนดที่ต้องพิมพ์) จะแนบคลาสตัวทำเครื่องหมาย ( pe-preserve-print) กับโหนดปัจจุบัน จากนั้นแนบคลาส marker อื่น ( pe-no-print) กับพี่น้องทั้งหมดของโหนดปัจจุบัน แต่หากไม่มีpe-preserve-printคลาสบนพวกเขา เป็นการกระทำที่สามมันยังแนบคลาสอีกชั้นเพื่อรักษาองค์ประกอบบรรพบุรุษpe-preserve-ancestorในฐานะที่เป็นองก์ที่สามก็ยังยึดติดกับชั้นอีกครั้งเพื่อให้องค์ประกอบของบรรพบุรุษที่เก็บรักษาไว้

css ที่พิมพ์อย่างเดียวอย่างง่ายเสริมจะซ่อนและแสดงองค์ประกอบที่เกี่ยวข้อง ประโยชน์บางประการของวิธีนี้คือการรักษาสไตล์ไว้ทั้งหมดไม่เปิดหน้าต่างใหม่ไม่จำเป็นต้องย้ายองค์ประกอบ DOM จำนวนมากและโดยทั่วไปจะไม่รุกรานเอกสารต้นฉบับของคุณ

ดูการสาธิตหรืออ่านบทความที่เกี่ยวข้องสำหรับรายละเอียดเพิ่มเติม

— AndrásSzepesházi
แหล่งที่มา

0

คุณสามารถใช้สิ่งนี้: http://vikku.info/codesnippets/javascript/print-div-content-print-only-the-content-of-an-html-element-and-not-the-whole-document/

หรือใช้visibility:visibleและvisibility:hiddenคุณสมบัติ CSS ร่วมกับ@media print{}

'display: none' จะซ่อนทั้งหมด 'display: block' ที่ซ้อนกัน นั่นไม่ใช่วิธีแก้ปัญหา

— 0xC0DEGURU
แหล่งที่มา

0

ฉันพบวิธีแก้ปัญหา

@media print {
    .print-area {
        background-color: white;
        height: 100%;
        width: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index:1500;
        visibility: visible;
    }
    @page{
        size: portrait;
        margin: 1cm;
    }
/*IF print-area parent element is position:absolute*/
    .ui-dialog,
    .ui-dialog .ui-dialog-content{
        position:unset !important;
        visibility: hidden;
    }
}

— user2573099
แหล่งที่มา

0

จาก @Kevin Florida คำตอบฉันทำวิธีหลีกเลี่ยงสคริปต์ในหน้าปัจจุบันปิดใช้งานเนื่องจากมีการเขียนทับเนื้อหา ฉันใช้ไฟล์อื่นที่เรียกว่า "printScreen.php" (หรือ. html) ห่อทุกสิ่งที่คุณต้องการพิมพ์ใน div "printSource" และด้วย javascript ให้เปิดหน้าต่างใหม่ที่คุณสร้างไว้ก่อนหน้า ("printScreen.php") จากนั้นหยิบเนื้อหาใน "printSource" ของหน้าต่างด้านบน

นี่คือรหัส

หน้าต่างหลัก:

echo "<div id='printSource'>";
//everything you want to print here
echo "</div>";

//add button or link to print
echo "<button id='btnPrint'>Print</button>";

<script>
  $("#btnPrint").click(function(){
    printDiv("printSource");
  });

  function printDiv(divName) {
   var printContents = document.getElementById(divName).innerHTML;
   var originalContents = document.body.innerHTML;
   w=window.open("printScreen.php", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=50,left=50,width=900,height=400");
   }
</script>

นี่คือ "printScreen.php" - ไฟล์อื่นเพื่อจับเนื้อหาที่จะพิมพ์

<head>
// write everything about style/script here (.css, .js)

</head>
<body id='mainBody'></body>
</html>


<script>
    //get everything you want to print from top window
    src = window.opener.document.getElementById("printSource").innerHTML;

    //paste to "mainBody"
    $("#mainBody").html(src);
    window.print();
    window.close();
</script>

— QeiNui
แหล่งที่มา