2021-03-22 18:14:29 +08:00
|
|
|
|
<template>
|
2021-10-17 12:32:28 +08:00
|
|
|
|
<div id="printRef">
|
2021-03-22 18:14:29 +08:00
|
|
|
|
<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-button @click="onPrintJs" size="small" type="primary" icon="iconfont icon-dayin">点击打印演示</el-button>
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
|
|
|
|
import { reactive, toRefs } from 'vue';
|
|
|
|
|
|
import printJs from 'print-js';
|
|
|
|
|
|
export default {
|
2021-04-01 11:13:38 +08:00
|
|
|
|
name: 'funPrintJs',
|
2021-03-22 18:14:29 +08:00
|
|
|
|
setup() {
|
|
|
|
|
|
const state = reactive({});
|
|
|
|
|
|
// 打印点击
|
|
|
|
|
|
const onPrintJs = () => {
|
|
|
|
|
|
printJs({
|
2021-10-17 12:32:28 +08:00
|
|
|
|
printable: 'printRef',
|
2021-03-22 18:14:29 +08:00
|
|
|
|
type: 'html',
|
|
|
|
|
|
css: ['//at.alicdn.com/t/font_2298093_o73r8wjdhlg.css', 'https://unpkg.com/element-plus/lib/theme-chalk/index.css'],
|
|
|
|
|
|
scanStyles: false,
|
|
|
|
|
|
style: `@media print{.mb15{margin-bottom:15px;}.el-button--small i.iconfont{font-size: 12px !important;margin-right: 5px;}}`,
|
|
|
|
|
|
});
|
|
|
|
|
|
};
|
|
|
|
|
|
return {
|
|
|
|
|
|
onPrintJs,
|
|
|
|
|
|
...toRefs(state),
|
|
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
};
|
|
|
|
|
|
</script>
|
