181 lines
3.3 KiB
Vue
181 lines
3.3 KiB
Vue
<template>
|
|
<el-dialog :model-value="props.showes" @close="closeFun" width="70%">
|
|
<div ref="ceshiRef">
|
|
<ceshi id="ceshi" :data="props.listData"></ceshi>
|
|
</div>
|
|
|
|
<div class="btnList">
|
|
<el-button type="primary" @click="printElement">{{ t('message.index.print') }}</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { defineProps, reactive, ref, defineEmits } from 'vue';
|
|
import ceshi from './ceshi.vue';
|
|
import printJS from 'print-js';
|
|
import html2canvas from 'html2canvas';
|
|
import { useI18n } from 'vue-i18n';
|
|
const { t } = useI18n()
|
|
const ceshiRef = ref();
|
|
const emits = defineEmits(['close']);
|
|
const props = defineProps({
|
|
listData: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
showes: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
});
|
|
const state = reactive({
|
|
snapshotUrl: '',
|
|
});
|
|
const closeFun = () => {
|
|
emits('close');
|
|
};
|
|
const printElement = () => {
|
|
captureSnapshot();
|
|
// 获取 DOM 元素的 HTML
|
|
};
|
|
// 截图函数
|
|
const captureSnapshot = async () => {
|
|
const canvas = await html2canvas(ceshiRef.value, {
|
|
allowTaint: true, // 允许跨域图片
|
|
useCORS: true, // 使用 CORS 加载图片
|
|
scale: 2, // 提高截图分辨率
|
|
width: ceshiRef.value.clientWidth,
|
|
height: ceshiRef.value.clientHeight,
|
|
});
|
|
state.snapshotUrl = canvas.toDataURL('image/png');
|
|
printJS({
|
|
printable: state.snapshotUrl,
|
|
type: 'image',
|
|
style: `
|
|
@page {
|
|
size: auto;
|
|
margin: 0mm;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
padding: 36px;
|
|
}
|
|
`,
|
|
});
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.btnList {
|
|
margin-top: 26px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
:deep(.el-form){
|
|
border-right: 0 !important;
|
|
}
|
|
.shuming {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
//text-align: left;
|
|
}
|
|
.nameText {
|
|
margin-right: 120px;
|
|
margin-top: 80px;
|
|
}
|
|
.dateTime {
|
|
margin-right: 50px;
|
|
margin-top: 16px;
|
|
}
|
|
.dateTime > span {
|
|
margin-left: 42px;
|
|
}
|
|
:deep(.el-table__inner-wrapper) {
|
|
box-sizing: border-box;
|
|
//border: 1px solid black;
|
|
}
|
|
|
|
:deep(.is-leaf) {
|
|
border-color: black;
|
|
}
|
|
|
|
:deep(.el-table__cell) {
|
|
border-color: black;
|
|
}
|
|
|
|
:deep(.el-table__cell) {
|
|
border-color: black !important;
|
|
}
|
|
|
|
:deep(.el-card) {
|
|
border: 1px solid black !important;
|
|
}
|
|
|
|
:deep(.avue-crud__header) {
|
|
display: none;
|
|
}
|
|
|
|
:deep(.avue-crud__body) {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.orderPrinting {
|
|
width: 100%;
|
|
|
|
.title {
|
|
width: 100%;
|
|
height: 50px;
|
|
background-color: #deeaf6;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 22px;
|
|
letter-spacing: 10px;
|
|
}
|
|
|
|
.orderPrintingTop {
|
|
height: 161px;
|
|
border: 1px solid #000000;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
|
|
.item1 {
|
|
width: 33.33%;
|
|
height: 160px;
|
|
border-right: 1px solid #000000;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.item2 {
|
|
width: 33.33%;
|
|
height: 160px;
|
|
border-right: 1px solid #000000;
|
|
box-sizing: border-box;
|
|
padding: 16px;
|
|
|
|
.dataText {
|
|
font-size: 16px;
|
|
margin-bottom: 16px;
|
|
color: #000000;
|
|
}
|
|
}
|
|
|
|
.item2 {
|
|
width: 33.33%;
|
|
height: 160px;
|
|
//border-right: 1px solid black;
|
|
}
|
|
|
|
.item3 {
|
|
width: 33.33%;
|
|
height: 160px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|