npm install print-js --save
3. 导入
在main.js 中全局导入
import printjs from 'print-js'
import 'print-js/dist/print.css';
Vue.prototype.$print = printjs;
4. 使用
<template>
<div id="printBox">
<img src="@/assets/resources/images/zuyoulogo.png" alt="">
<img src="@/assets/logo.png" alt="">
<h1>abc</h1>
<div style="page-break-after:always;">分页1</div>
<div style="page-break-after:always;">分页2</div>
<div style="page-break-after:always;">分页3</div>
<div style="page-break-after:always;">分页4</div>
</div>
<a-button @click="printHTML">打印HTML</a-button>
<a-button @click="printPDF">打印PDF</a-button>
<a-button @click="printImg">打印图片</a-button>
<a-button @click="printJSON">打印JSON</a-button>
</template>
<script>
export default {
data() {
return {
printUrl: '',
printUrl2: '',
someJSONdata: [
name: 'John Doe',
email: '[email protected]',
phone: '111-111-1111'
name: 'Barry Allen',
email: '[email protected]',
phone: '222-222-2222'
name: 'Cool Dude',
email: '[email protected]',
phone: '333-333-3333'
methods: {
printHTML() {
this.$print({
printable: 'printBox',
type: 'html',
header: '打印标题',
targetStyles: ['*'],
printJSON() {
this.$print({printable: this.someJSONdata, properties: ['name', 'email', 'phone'], type: 'json'})
printPDF() {
this.$print({printable: 'docs/xx_large_printjs.pdf', type: 'pdf'})
printImg() {
this.$print({
printable: this.printUrl,
type: 'image'
});
this.$print({
printable: [this.printUrl, this.printUrl2],
type: 'image'
});
