gx

chenyc

2025-02-28 35a85b085df4c76c38c76dfda74aa4527cea0b5b

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
<template>
    <div ref="printRef" class="layout-pd">
        <el-card shadow="hover" header="打印演示">
            <el-alert
                title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
                type="success"
                :closable="false"
                class="mb15"
            ></el-alert>
            <el-alert
                title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
                type="success"
                :closable="false"
                class="mb15"
            ></el-alert>
            <el-alert
                title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
                type="success"
                :closable="false"
                class="mb15"
            ></el-alert>
            <el-alert
                title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
                type="success"
                :closable="false"
                class="mb15"
            ></el-alert>
            <el-alert
                title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
                type="success"
                :closable="false"
                class="mb15"
            ></el-alert>
            <el-alert
                title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
                type="success"
                :closable="false"
                class="mb15"
            ></el-alert>
            <el-alert
                title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
                type="success"
                :closable="false"
                class="mb15"
            ></el-alert>
            <el-alert
                title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
                type="success"
                :closable="false"
                class="mb15"
            ></el-alert>
            <el-alert
                title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
                type="success"
                :closable="false"
                class="mb15"
            ></el-alert>
            <el-alert
                title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
                type="success"
                :closable="false"
                class="mb15"
            ></el-alert>
            <el-alert
                title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
                type="success"
                :closable="false"
                class="mb15"
            ></el-alert>
            <el-alert
                title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
                type="success"
                :closable="false"
                class="mb15"
            ></el-alert>
            <el-alert
                title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
                type="success"
                :closable="false"
                class="mb15"
            ></el-alert>
            <el-alert
                title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
                type="success"
                :closable="false"
                class="mb15"
            ></el-alert>
            <el-alert
                title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
                type="success"
                :closable="false"
                class="mb15"
            ></el-alert>
            <el-alert
                title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
                type="success"
                :closable="false"
                class="mb15"
            ></el-alert>
            <el-alert
                title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
                type="success"
                :closable="false"
                class="mb15"
            ></el-alert>
            
        </el-card>
    </div>
    <el-button @click="onPrintJs" size="default" type="primary">
                <SvgIcon name="iconfont icon-dayin" />
                点击打印演示
            </el-button>
</template>
 
<script setup lang="ts" name="funPrintJs">
import { ref } from 'vue';
import printJs from 'print-js';
 
// 定义变量内容
const printRef = ref();
 
// 打印点击
const onPrintJs = () => {
    printJs({
        printable: printRef.value,
        type: 'html',
        css: ['//at.alicdn.com/t/c/font_2298093_rnp72ifj3ba.css', '//unpkg.com/element-plus/dist/index.css'],
        scanStyles: false,
        style: `@media print{.mb15{margin-bottom:15px;}.el-button--small i.iconfont{font-size: 12px !important;margin-right: 5px;}}`,
    });
};
</script>