VUE生成pdf打印、预览效果_vue 打印pdf

VUE生成pdf打印、预览效果

原文链接

一. 效果

二.介绍

1.vue-print-nb官网：www.npmjs.com/package/vue…
2.vue-print-nb安装：npm install vue-print-nb --save
3.出现在打印预览的界面，这里的样式需要写在@media print {}里面 如果需要设置预览页规则，> 页脚等样式 @page{}
4.打印内容不满一页时自动分页：要打印的内容的div里加style:‘page-break-after: always’

三.代码

3.1安装依赖

npm install vue-print-nb --save

3.2 在main.js中引入Print

import Vue from 'vue'
import Print from 'vue-print-nb'
Vue.use(Print)
1
2
3

3.3 print.vue

<template>
  <div>
    <el-card
      class="box-card"
      :body-style="{
        padding: '20px',
        minHeight: 'calc(100vh - 100px)',
      }"
    >
      <div class="feature">
        <div>
          1.vue-print-nb官网：https://www.npmjs.com/package/vue-print-nb
        </div>
        <div>2.vue-print-nb安装：npm install vue-print-nb --save</div>
        <div>
          3.出现在打印预览的界面，这里的样式需要写在@media print
          {}里面 如果需要设置预览页规则，页脚等样式 @page{}
        </div>
        <div>
          4.打印内容不满一页时自动分页：要打印的内容的div里加style:'page-break-after:
          always'
        </div>
      </div>
      <div id="print">
        <!-- 这里是需要打印的内容 -->
        <!-- 第一页-start -->
        <div class="pageDiv">
          <img
            src="https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
          />
          <div class="listTable">
            <table width="100%" style="text-align: center;">
              <thead>
                <tr>
                  <td>ID</td>
                  <td>姓名</td>
                  <td>手机号码</td>
                  <td>ID</td>
                  <td>姓名</td>
                  <td>手机号码</td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in tables" :key="item.id">
                  <td>{{ item.id }}</td>
                  <td>{{ item.name }}</td>
                  <td>{{ item.mobile }}</td>
                  <td>{{ item.id }}</td>
                  <td>{{ item.name }}</td>
                  <td>{{ item.mobile }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <!-- 第一页-end -->

        <!-- 第二页-start -->
        <div class="pageDiv">我是第二个分页</div>
        <!-- 第二页-end -->
      </div>

      <!-- <el-button type="primary" size="mini" v-print="'#print'">
        打印
      </el-button> -->

      <el-button type="primary" size="mini" v-print="printObj">
        打印
      </el-button>
    </el-card>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      printObj: {
        id: "print", //要打印的id名 无#号
        extraCss: "", // 打印可引入外部的一个 css 文件
        popTitle: "&nbsp;", //打印的页眉标题，默认浏览器标题 空字符串时显示undefined 使用html语言
        extraHead: "", //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        preview: "", // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        previewTitle: "", // 打印预览的标题（开启预览模式后出现）,
        previewPrintBtnLabel: "", // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        zIndex: "", // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
        previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
        beforeOpenCallback() {}, // 开启打印前的回调事件
        openCallback() {}, // 调用打印之后的回调事件
        closeCallback() {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）
        url: "",
        standard: "",
      },
      tables: [
        {
          id: 1,
          name: "小张",
          mobile: "13548523654",
          status: "正常",
        },
        {
          id: 2,
          name: "小李",
          mobile: "13548523654",
          status: "停用",
        },
        {
          id: 3,
          name: "小红",
          mobile: "13548523654",
          status: "正常",
        },
        {
          id: 4,
          name: "小黄",
          mobile: "13548523654",
          status: "停用",
        },
      ],
      printShow: false,
    };
  },
  methods: {},
  created() {},
};
</script>

<style lang="scss" scoped>
.feature {
  text-align: left;
  margin-bottom: 20px;
  line-height: 22px;
  font-size: 14px;
}

//默认隐藏需要打印的内容
#print {
  display: none;
}

//打印预览的界面的样式
@media print {
  //设置默认不打印页尾、页码（margin-top: 0;margin-bottom: 0;）
  @page {
    size: auto; /* auto is the initial value */
    margin: 0 20px;
  }

  #print {
    display: block;
  }
  .listTable {
    font-size: 14px;
    color: #000;
    table {
      border-top: 1px solid #000;
      border-left: 1px solid #000;
      border-spacing: 0;
      td {
        border-bottom: 1px solid #000;
        padding: 8px 10px;
        border-right: 1px solid #000;
        line-height: 20px;
        text-align: center;
      }
    }
  }

  //打印内容不满一页时自动分页要打印的内容的div里加style:'page-break-after:always'
  .pageDiv {
    page-break-after: always;
    padding: 30px 0;
  }
}
</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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177