JavaScript 또는 CSS를 통해 브라우저 인쇄 설정에서 페이지 상단 및 끝을 제어하는 ​​방법은 무엇입니까?

JavaScript와 CSS가 브라우저 인쇄 설정의 헤더 및 바닥 글을 제어 할 수 있습니까?

많은 개발자가 JavaScript 또는 CSS를 사용하여 기본적으로 선택 취소 또는 헤더 바닥 글 콘텐츠를 사용자 정의하는 것과 같은 브라우저 인쇄 대화 상자에서 헤더 바닥 글 설정을 제어하려고합니다. 그러나 이것은 쉬운 일이 아니며,이 기사는 타당성과 한계를 깊이 탐구합니다.

문제 개요

목표는 코드를 통해 브라우저 인쇄 설정에서 헤더 및 바닥 글 옵션을 제어하는 ​​것입니다. 특정 요구 사항은 다음과 같습니다.

1. 헤더 바닥 글은 기본적으로 비활성화됩니다. 인쇄시 헤더 바닥 글은 기본적으로 표시되지 않습니다.
2. @media print 있는 사용자 정의 헤더 바닥 글 : @media print 스타일 규칙이있는 사용자 정의 헤더 바닥 글 콘텐츠이지만 printJS 플러그인을 사용할 때는이 방법이 작동하지 않습니다.

사용자가 제공하는 코드 스 니펫은 다음과 같습니다.

 html2canvas (this. $ refs.templatetoimg, {
  배경 콜로르 : NULL,
  USECORS : 사실,
  WindowHeight : Document.Body.ScrollHeight,
}). 그런 다음 (canvas => {
  dom.style.height = 'calc (100vh -400px)' '
  dom.style.overflow = 'Auto'
  const url = canvas.todataurl ( 'image/jpg')
  this.img = url
  const styles = "@media print {@page {height : 100%;@top-left {content : 'top content';}@attant-center {content : 'footer content';}}}"
  printjs ({
    인쇄 가능 : URL,
    유형 : '이미지',
    DocumentTitle : this.previewtitle (),
    스타일 : 스타일,
    onloadingend : () => {
      this.printloing = false
      dom.style.height = 'Auto'
      dom.style.overflow = 'Visible'
    }
  })
})

솔루션 및 제한

열쇠는 다음과 같은 점을 이해하는 것입니다.

1. 브라우저 인쇄 설정의 통제 가능성 : 브라우저 인쇄 설정 (헤더 및 바닥 글 포함)은 브라우저 자체 또는 운영 체제에 의해 제어되며 JavaScript와 CSS는 직접 간섭 할 수 없습니다.
2. @media print 의 제한 : @media print 인쇄 스타일을 제어 할 수 있지만 브라우저의 인쇄 설정을 직접 수정할 수는 없습니다. printJS 플러그인은 @media print 통해 설정된 스타일을 무시할 수 있습니다.
3. printJS 플러그인의 기능 : printJS 는 주로 HTML 컨텐츠 또는 그림을 인쇄하는 데 사용되며 직접 브라우저 인쇄 설정을 직접 수정하지 않습니다. 코드에서는 style 매개 변수를 통해 @media print 스타일을 전달하려고 시도했지만 printJS 에서는 잘 작동하지 않았습니다.

따라서 결론은 다음과 같습니다. JavaScript 및 CSS는 브라우저의 인쇄 설정에 대한 헤더 및 바닥 글 옵션을 직접 제어 할 수 없습니다. 이것은 브라우저 및 운영 체제의 권한 범위에 속합니다.

헤더 및 바닥 글을 사용자 정의하려면이 요소를 인쇄 콘텐츠에 직접 추가하고 인쇄 할 때 보이고 인쇄 플러그인의 영향을받지 않도록 할 수 있습니다. 개발자는 브라우저 인쇄 설정을 직접 제어한다는 아이디어를 포기하고 대신 인쇄 콘텐츠 자체에서 헤더 및 바닥 글을 구현하는 데 집중해야합니다.

위 내용은 JavaScript 또는 CSS를 통해 브라우저 인쇄 설정에서 페이지 상단 및 끝을 제어하는 ​​방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!