이 글의 내용은 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="'#printTest'">打印</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,{'no-print':'.do-not-print-me-xxx'}) // 使用
이 기사는 여기에서 확인할 수 있습니다. PHP 중국어 웹사이트의 JavaScript Tutorial Video 칼럼!
위 내용은 Vue에서 인쇄 기능을 구현하는 두 가지 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!