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

不言
풀어 주다: 2019-03-20 11:36:18
앞으로
8707명이 탐색했습니다.

이 글의 내용은 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 &#39;@/plugs/print&#39;
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
vue
원천:segmentfault.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿