<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-button @click="onPrintJs" size="default" type="primary">
|
<SvgIcon name="iconfont icon-dayin" />
|
点击打印演示
|
</el-button>
|
</el-card>
|
</div>
|
</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>
|
