vue使用print.js打印插件_print.js中文官网

作者：羊村懒王 | 2024-02-18 05:28:10

踩

print.js中文官网

任务：解决vue页面局部打印功能

print.js插件，可以打印 html、pdf、json数据
官网：https://printjs.crabbly.com/
一个整理的很好的讲解:https://www.jianshu.com/p/bc079fbb20c7

一、步骤：

1.安装插件

 npm install print-js --save
1

2.在需要打印的页面导入库

 import print from 'print-js'
1

3.在vue文件中新建一个打印div盒子，设一个 id 值（printBox），作为打印的区域

以下作为测试代码，测试了表循环data中的数据、图片、echart图表。以下是打印区域

 <div id="printBox">
      <h3>打印预览</h3>
      <div style="display:flex;color:#333;">
        <div style="margin-right:20px;">用户：{{ user }}</div>
        <div>园区：{{ garden }}</div>
      </div>
      <table border="1"
        cellspacing="0"
        cellpadding="3mm"
        width="1000px"
        style="margin-top:20px;color:pink;"
      >
        <tr>
          <td>日期</td>
          <td>姓名</td>
          <td>地址</td>
        </tr>
        <tr v-for="(item, index) in tableData" :key="index">
          <td>{{ item.date }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.address }}</td>
        </tr>
      </table>
      <div id="main" style="width: 600px;height:400px;margin-top:50px;"></div>
      <img src="../../assets/bg-b.png" width="500px" style="margin-top:50px;" />
    </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

4.在打印按钮上添加点击事件

<el-button type="success" @click="printBox">打印Box</el-button>
1

5.在methods中添加点击事件

必要的就是printable和type

printBox() {
      setTimeout(function() {
        print({
          printable: 'printBox',	//打印区域id
          type: 'html',		//打印类型是html
          scanStyles: false,
          targetStyles: ['*'],
        })
      }, 500)
    },
1
2
3
4
5
6
7
8
9
10

二、注意事项

1.在打印区域内必须用行内样式，不然打印的时候就没有样式。（print.js好像有自带的属性可以加css，但是我没有搞明白，行内就行内吧）

<div style="display:flex;color:#333;">
1

2.echart函数调用必须要放到mounted里面，不然不显示。

3.在print里，以下两行至少加一行，不然行内样式的padding和margin就不管用了

scanStyles: false,
targetStyles: ['*'],
1
2

三、完整代码

<template>
  <div class="test">
    <div id="printBox">
      <h3>打印预览</h3>
      <div style="display:flex;color:#333;">
        <div style="margin-right:20px;">用户：{{ user }}</div>
        <div>园区：{{ garden }}</div>
      <div style="padding:30px;width:100px;height:50px;background:skyblue;border:1px solid #ccc;">测试padding</div>
      </div>
      <table
        border="1"
        cellspacing="0"
        cellpadding="3mm"
        width="1000px"
        style="margin-top:20px;color:pink;"
      >
        <tr>
          <td>日期</td>
          <td>姓名</td>
          <td>地址</td>
        </tr>
        <tr v-for="(item, index) in tableData" :key="index">
          <td>{{ item.date }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.address }}</td>
        </tr>
      </table>

      <div id="main" style="width: 600px;height:400px;margin-top:20px;"></div>

      <img src="../../assets/bg-b.png" width="500px" style="margin-top:50px;" />
    </div>

    <div class="btns">
      <!-- 按钮 -->
      <el-button type="primary" @click="printAll">js打印</el-button>
      <el-button type="success" @click="printBox">打印Box</el-button>
    </div>
  </div>
</template>

<script>
import print from 'print-js'
import * as echarts from 'echarts'
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
      garden: '院士智谷',
      user: 'admin',
    }
  },
  mounted() {
    this.getEchart()
  },
  methods: {
     //原生的打印
    printAll() {
      window.print()
    },
    printBox() {
      setTimeout(function() {
        print({
          printable: 'printBox',
          type: 'html',
          scanStyles: false,
          targetStyles: ['*'],
          // style: '#printBox{ display: block !important}', // 表格样式
          // HonorMarginPadding: false,
        })
      }, 500)
    },
    getEchart() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById('main'))

      // 指定图表的配置项和数据
      const option = {
        title: {
          text: 'ECharts 入门示例',
        },
        tooltip: {},
        legend: {
          data: ['销量'],
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
  },
}
</script>

<style lang="scss" scoped>
.test {
  margin: 50px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132