Vue에서 인쇄 기능을 구현하는 두 가지 방법(코드 포함)

이 글의 내용은 Vue(코드 포함)에서 인쇄 기능을 구현하는 두 가지 방법에 대한 내용입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

첫 번째 방법: npm

1을 통해 플러그인을 설치하고, npm install vue-print-nb --save

2를 설치하고, 설치 후 main.js 파일에 도입하세요.

   import Print from 'vue-print-nb'
  　　Vue.use(Print);  //注册

3 , 지금 사용하실 수 있습니다

<div id="printTest" >
　　　　　　<p>明月照于山间</p>
　　　　　　<p>清风来于江上 </p>
　　　　</div>
　　　　<button v-print="&#39;#printTest&#39;">打印</button>

4. 링크 주소를 통해 인쇄해야 하는 경우: window.location.href = airway_bill이 링크 주소입니다.

5. 내용이 완전히 인쇄되지 않으면 인쇄 작업 중에 추가 설정을 클릭한 후 확대/축소를 설정하세요.

두 번째 방법: 플러그인을 로컬

플러그인 주소: https://github.com/xyl66/vuePlugs_printjs

1에 수동으로 다운로드합니다. src 아래에 새 폴더를 만들고 다운로드한 print.js를 넣습니다.

import Print from '@/plugs/print'
Vue.use(Print) // 注册
<template>
　　<section ref="print">
　　　　打印内容
　　　　<div class="no-print">不要打印我</div>
　　</section>
</template>
this.$print(this.$refs.print) // 使用

2. dom 노드를 얻으려면 ref를 사용해야 합니다. id나 class를 통해 직접 얻으면 웹팩 패키징 및 배포 후에 인쇄된 내용이 비어 있게 됩니다.

3. 인쇄되지 않는 영역 지정

방법 1. 인쇄되지 않는 스타일 클래스 추가

<div class="no-print">不要打印我</div>

방법 2. 클래스 이름 사용자 정의

<div class="do-not-print-me-xxx">不要打印我</div>
this.$print(this.$refs.print,{&#39;no-print&#39;:&#39;.do-not-print-me-xxx&#39;}) // 使用

이 기사는 여기에서 확인할 수 있습니다. PHP 중국어 웹사이트의 JavaScript Tutorial Video 칼럼!

위 내용은 Vue에서 인쇄 기능을 구현하는 두 가지 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!