จำเป็นต้องลบค่า href เมื่อพิมพ์ใน Chrome

ฉันกำลังพยายามปรับแต่ง CSS การพิมพ์และพบว่ามันพิมพ์ลิงก์ออกมาพร้อมกับhrefค่าเช่นเดียวกับลิงค์

นี่คือใน Chrome

สำหรับ HTML นี้:

<a href="http://www.google.com">Google</a>

มันพิมพ์:

Google (http://www.google.com)

และฉันต้องการให้พิมพ์:

Google

Bootstrap ทำสิ่งเดียวกัน (... ตามคำตอบที่เลือกด้านล่าง)

@media print {
  a[href]:after {
    content: " (" attr(href) ")";
  }
}

เพียงลบออกจากที่นั่นหรือแทนที่ในสไตล์การพิมพ์ของคุณเอง:

@media print {
  a[href]:after {
    content: none !important;
  }
}

มันไม่ได้ ที่ไหนสักแห่งในสไตล์การพิมพ์ของคุณคุณต้องมีส่วนของรหัสนี้:

a[href]::after {
    content: " (" attr(href) ")"
}

ความเป็นไปได้อื่น ๆ เท่านั้นคือคุณมีส่วนขยายที่ทำเพื่อคุณ

@media print {
   a[href]:after {
      display: none;
      visibility: hidden;
   }
}

การทำงานที่สมบูรณ์แบบ

หากคุณใช้ CSS ต่อไปนี้

<link href="~/Content/common/bootstrap.css" rel="stylesheet" type="text/css"    />
<link href="~/Content/common/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/common/site.css" rel="stylesheet" type="text/css" />

เพียงเปลี่ยนเป็นสไตล์ดังต่อไปนี้โดยเพิ่มmedia = "screen"

<link href="~/Content/common/bootstrap.css" rel="stylesheet" **media="screen"** type="text/css" />
<link href="~/Content/common/bootstrap.min.css" rel="stylesheet" **media="screen"** type="text/css" />
<link href="~/Content/common/site.css" rel="stylesheet" **media="screen"** type="text/css" />

ฉันคิดว่ามันจะทำงาน

คำตอบเดิมเช่น

    @media print {
  a[href]:after {
    content: none !important;
  }
}

ไม่ทำงานได้ดีในการเรียกดูโครเมี่ยม

ฉันพบปัญหาที่คล้ายกันเฉพาะกับ img ที่ซ้อนกันในสมอของฉัน:

<a href="some/link">
   <img src="some/src">
</a>

เมื่อฉันสมัคร

@media print {
   a[href]:after {
      content: none !important;
   }
}

ฉันทำ img ของฉันและความกว้างของสมอหายไปด้วยเหตุผลบางอย่างดังนั้นฉันจึงใช้:

@media print {
   a[href]:after {
      visibility: hidden;
   }
}

ซึ่งทำงานได้อย่างสมบูรณ์แบบ

เคล็ดลับโบนัส : ตรวจสอบตัวอย่างก่อนพิมพ์

ในการซ่อนหน้า URL

ใช้media="print"ในตัวอย่าง tage สไตล์:

<style type="text/css" media="print">
            @page {
                size: auto;   /* auto is the initial value */
                margin: 0;  /* this affects the margin in the printer settings */
            }
            @page { size: portrait; }
</style>

หากคุณต้องการลบลิงค์:

@media print {
   a[href]:after {
      visibility: hidden !important;
   }
}

สำหรับผู้ใช้ปกติ เปิดหน้าต่างตรวจสอบของหน้าปัจจุบัน และพิมพ์ใน:

l = document.getElementsByTagName("a");
for (var i =0; i<l.length; i++) {
    l[i].href = "";
}

จากนั้นคุณจะไม่เห็นลิงก์ URL ในตัวอย่างก่อนพิมพ์