자바스크립트 프린터 구성요소 설치

인터넷이 발전함에 따라 점점 더 많은 웹페이지에서 인쇄 기능을 지원해야 합니다. JavaScript 프린터 구성 요소는 웹 페이지를 빠르게 인쇄하는 데 도움이 되는 매우 뛰어난 도구입니다. 이 기사에서는 JavaScript 프린터 구성 요소의 설치 방법과 사용 기술을 소개합니다.

1. JavaScript 프린터 구성 요소 설치

먼저 JavaScript 프린터 구성 요소를 다운로드해야 합니다. 다음은 권장되는 오픈 소스 JavaScript 인쇄 라이브러리입니다: Print.js. Print.js는 타사 라이브러리가 필요하지 않고 사용자 정의 스타일을 지원하며 다양한 인쇄 방법을 제공하는 사용하기 쉬운 라이브러리입니다.

Print.js 공식 웹사이트(https://printjs.crabbly.com/)를 열면 공식에서 세 가지 설치 방법을 제공하는 것을 확인할 수 있습니다.

1. CDN을 통한 소개

이 방법이 가장 간단하고 다음 코드를 HTML 파일에 복사해야 합니다.

<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>

2. NPM 패키지를 사용하여 설치

Node.js 환경을 사용하는 경우 다음 명령을 사용하여 설치할 수 있습니다.

npm install print-js

3.

GitHub에서 Print.js 코드를 수동으로 다운로드하거나 공식 웹사이트에서 최신 버전의 Print.js 압축 패키지를 다운로드하여 프로젝트에 추출할 수도 있습니다.

2. JavaScript 프린터 구성 요소 사용

1. 텍스트 인쇄

Print.js는 사용이 매우 편리하므로 함수를 호출하기만 하면 인쇄 기능을 구현할 수 있습니다. 다음은 텍스트 인쇄의 간단한 예입니다.

<script>
    function printText() {
        var text = "这是一段测试文本。";
        printJS({printable: text, type: 'raw'})
    }
</script>

<button onclick="printText()">打印文本</button>

위 코드에서는 인쇄 구성 요소를 초기화하고 지정된 텍스트를 인쇄하는 데 사용되는 JavaScript 함수 printText()를 정의합니다. 그 중 printable은 프린터를 통해 출력하려는 ​​텍스트이고, type 매개변수는 인쇄되는 내용의 유형을 지정합니다. 여기서는 인쇄된 텍스트가 원본 텍스트임을 의미합니다.

HTML 파일에 버튼을 추가했는데, 사용자가 버튼을 클릭하면 printText() 함수가 호출되고 텍스트가 인쇄됩니다.

2. 웹 페이지 인쇄

JavaScript 프린터 구성 요소는 텍스트 인쇄 외에도 스타일, 그림 등을 포함한 전체 웹 페이지 인쇄에도 도움이 될 수 있습니다. 다음은 간단한 웹 페이지 인쇄 예입니다.

<script>
    function printPage() {
        printJS({printable: 'https://www.example.com', type: 'url'})
    }
</script>

<button onclick="printPage()">打印网页</button>

위 코드에서는 printPage()라는 JavaScript 함수를 정의합니다. 사용자가 버튼을 클릭하면 이 함수가 참조되어 인쇄 구성 요소를 초기화하고 전체 웹을 인쇄합니다. 페이지.

이 예에서는 인쇄할 콘텐츠 유형을 URL로 지정하고, 인쇄할 웹 페이지 주소를 https://www.example.com으로 지정했습니다.

3. 사용자 정의된 인쇄 스타일

JavaScript 프린터 구성 요소는 사용자 정의 인쇄 스타일도 지원하므로 인쇄할 때 적절한 글꼴과 조판 설정을 선택하는 데 도움이 됩니다. 다음은 사용자 정의 인쇄 스타일의 예입니다.

<script>
    function printStyledText() {
        var text = "这是一段测试文本。";
        var style = "<style>body {font-family: Arial, sans-serif; font-size: 12pt;}</style>";
        printJS({printable: style + text, type: 'raw'})
    }
</script>

<button onclick="printStyledText()">打印格式化文本</button>

위 코드에서 printStyledText() 함수를 정의할 때 스타일 변수를 사용하여 사용할 CSS 스타일을 지정합니다. 그 중에서 글꼴 패밀리와 글꼴- 본문 아래의 크기 속성 인쇄된 텍스트의 스타일을 지정합니다. 또한 인쇄 가능한 콘텐츠에 스타일을 포함하고 최종 인쇄된 텍스트에는 이 스타일이 적용됩니다.

이 예에서는 CSS 스타일을 수정하여 인쇄된 콘텐츠의 모양을 추가로 변경할 수 있습니다.

3. 요약

이 글에서는 JavaScript 프린터 구성 요소의 설치 방법과 사용 기술을 소개하고, 텍스트 인쇄, 웹 페이지 인쇄 및 인쇄 스타일 사용자 정의의 예를 보여줍니다. 이러한 방법을 사용하면 웹 페이지의 인쇄 기능을 신속하게 구현하고 인쇄된 콘텐츠의 모양을 완벽하게 제어할 수 있습니다.

위 내용은 자바스크립트 프린터 구성요소 설치의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!