Perlu menghapus nilai href saat mencetak di Chrome


290

Saya mencoba untuk menyesuaikan cetak CSS, dan menemukan bahwa itu mencetak tautan dengan hrefnilai serta tautan.

Ini ada di Chrome.

Untuk HTML ini:

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

Mencetak:

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

Dan saya ingin mencetak:

Google

1
Perlu diingat MENGAPA setiap kerangka CSS utama melakukan itu - Anda tidak dapat mengklik di atas kertas! Jadi, jika Anda akan menonaktifkannya, Anda harus menambahkan daftar tautan di bagian bawah, seperti ini: alistapart.com/article/improvingprint
Julix

1
Itu benar, tapi saya pikir lebih baik untuk mengontrol kapan dan di mana tautan muncul. Misalnya, di tautan saya, saya ingin mereka muncul di baris berikutnya setelah teks, dan tanpa tanda kurung. Jadi saya hanya menunjukkan url di teks.
user4052054

Jawaban:


602

Bootstrap melakukan hal yang sama (... seperti jawaban yang dipilih di bawah).

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

Hapus saja dari sana, atau ganti dengan lembar gaya cetak Anda sendiri:

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

17
<style>@media print{a[href]:after{content:none}}</style>Sebagian besar memposting untuk saya sendiri ketika saya terus kembali ke halaman ini, terima kasih
William Entriken

1
Rupanya Foundation juga melakukan hal yang sama.
spasticninja

Sepertinya HTML5 Boilerplate juga melakukan ini! Jadi saya kira saya harus menimpanya melalui perubahan kode di situs web saya sendiri, dan melalui Inspektur di situs web lain ...
ADTC

Peringatan: Kami memiliki masalah ketika sebuah tabel terkadang kehilangan beberapa baris terakhir saat mencetak. Ternyata aturan ini adalah pelakunya, atau setidaknya menghapusnya memperbaiki masalah. Tidak tahu mengapa itu memiliki efek seperti itu.
Henrik N

1
@ HenrikN - saya pikir itu terkait dengan kolom bootstrap mengambang. menggunakan di float:nonemana perlu memperbaiki masalah serupa untuk saya beberapa minggu yang lalu; mungkin membantu Anda, tetapi itu masalah yang berbeda
Andrew

40

Tidak . Di suatu tempat di lembar gaya pencetakan Anda, Anda harus memiliki bagian kode ini:

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

Satu-satunya kemungkinan lain adalah Anda memiliki ekstensi untuk melakukannya.


1
Saya mendapatkannya di zurb foundation css.
forX

26

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

Pekerjaan sempurna.


10

Jika Anda menggunakan CSS berikut

<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" />

ubah saja ke gaya berikut dengan menambahkan media = "layar"

<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" />

Saya pikir itu akan berhasil.

jawaban mantan suka

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

tidak berfungsi dengan baik di penelusuran krom.


4

Saya mengalami masalah serupa hanya dengan img bersarang di jangkar saya:

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

Ketika saya melamar

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

Saya kehilangan img dan seluruh lebar jangkar karena beberapa alasan, jadi saya malah menggunakan:

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

yang bekerja dengan sempurna.

Kiat bonus : periksa pratinjau cetak


1

Untuk menyembunyikan url Halaman.

gunakan media="print"dalam contoh gaya 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>

Jika Anda ingin menghapus tautan:

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

-2

Untuk pengguna normal. Buka jendela periksa halaman saat ini. Dan ketik:

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

Maka Anda tidak akan melihat tautan url di pratinjau cetak.


Ini adalah solusi yang baik jika Anda tidak memiliki kendali atas kode sumber dari halaman yang Anda coba cetak.
Paddymac
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.