Chrome에서 인쇄 할 때 href 값을 제거해야합니다.

290

인쇄 CSS를 사용자 정의하려고 시도 href하고 링크뿐만 아니라 값으로 링크를 인쇄한다는 것을 발견했습니다 .

이것은 Chrome에 있습니다.

이 HTML의 경우 :

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

다음을 인쇄합니다.

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

그리고 나는 그것을 인쇄하고 싶다 :

Google

— 크리스 그래 티니
소스

1

모든 주요 CSS 프레임 워크가 그렇게하는 이유를 명심하십시오-종이를 클릭 할 수 없습니다! 따라서 비활성화하려면 아래에 링크 목록을 추가해야합니다. alistapart.com/article/improvingprint

— Julix

1

사실이지만, 언제 어디서 링크가 나타나는지 제어하는 것이 좋습니다. 예를 들어, 링크에서 텍스트 다음에 괄호없이 다음 줄에 나타나기를 원합니다. 텍스트에 URL을 표시합니다.

— user4052054

602

부트 스트랩은 동일한 작업을 수행합니다 (아래 선택된 답변과 동일).

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

거기에서 제거하거나 자신의 인쇄 스타일 시트에서 재정의하십시오.

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

— 알렉스 지쿨 레스 쿠
소스

17

<style>@media print{a[href]:after{content:none}}</style>이 페이지로 계속 돌아올 때 주로 저 자신을 위해 게시합니다. 감사합니다

— William Entriken

1

분명히 재단도 마찬가지입니다.

— spasticninja

HTML5 Boilerplate 도 이와 같이 보입니다 ! 따라서 내 웹 사이트의 코드 변경과 다른 웹 사이트의 Inspector를 통해이를 재정의해야한다고 생각합니다.

— ADTC

경고 : 인쇄 할 때 테이블에서 마지막 몇 행이 손실되는 문제가있었습니다. 이 규칙이 범인 이었음이 밝혀 졌거나 최소한 제거하면 문제가 해결되었습니다. 왜 그 효과가 있었는지 모릅니다.

— 헨릭 N

1

@HenrikN-부트 스트랩 열 부동과 관련이 있다고 생각합니다. 사용하여 float:none필요한 나를 다시 몇 주 동안 비슷한 문제를 해결; 도움이 될 수도 있지만 다른 문제입니다.

— Andrew

40

그렇지 않습니다 . 인쇄 스타일 시트 어딘가에 다음 코드 섹션이 있어야합니다.

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

다른 가능성은 확장 기능이 있습니다.

— 에릭
소스

1

zurb 재단 CSS에서 얻었습니다.

— forX

26

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

스 니펫 확장

일이 완벽합니다.

— JELEWA.de
소스

10

다음 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;
  }
}

크롬 탐색에서 제대로 작동하지 않았습니다.

— 왕 지준
소스

4

앵커에 중첩 된 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;
   }
}

완벽하게 작동했습니다.

보너스 팁 : 인쇄 미리보기 검사

— 트램 가이
소스

1

페이지 URL을 숨기려면

media="print"스타일 태그 예제에서 사용 :

<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;
   }
}

— Abd Abughazaleh
소스

-2

일반 사용자의 경우. 현재 페이지의 검사 창을 엽니 다. 그리고 입력하십시오 :

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

그러면 인쇄 미리보기에 URL 링크가 표시되지 않습니다.

— 웬 신
소스

인쇄하려는 페이지의 소스 코드를 제어 할 수없는 경우이 방법이 좋습니다.

— Paddymac