source

Chrome에서 인쇄할 때 href 값을 제거해야 함

lovecheck 2023. 9. 9. 09:38
반응형

Chrome에서 인쇄할 때 href 값을 제거해야 함

인쇄 CSS를 커스터마이징하려고 하는데, 그 CSS가 링크를 출력한다는 것을 발견했습니다.href링크뿐만 아니라 가치도 있습니다.

크롬에 있습니다.

다음 HTML의 경우:

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

인쇄:

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

그리고 인쇄를 원합니다.

Google

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

@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"style 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 링크가 보이지 않습니다.

언급URL : https://stackoverflow.com/questions/7301989/need-to-remove-href-values-when-printing-in-chrome

반응형