修改看板和打印设置
夜笙歌
4 days ago
parent
380d191ad3
commit
3a3ca999ba
@ -0,0 +1,261 @@
|
||||
<template>
|
||||
|
||||
<div style="width: 100%;height: 100vh;overflow: hidden" title="预览" :close-on-press-escape="false"
|
||||
:show-close="false">
|
||||
|
||||
<el-dropdown split-button type="primary" @click="printFun" @command="switchPrinter" style="margin-right: 8px;">
|
||||
{{ printName() }}
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item :command="-1">导出PDF</el-dropdown-item>
|
||||
<el-dropdown-item divided :command="0">本地打印</el-dropdown-item>
|
||||
<el-dropdown-item :divided="k===0" :command="i.id" v-for=" (i,k) in printers">{{ i.name }}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<div id="printInfo" ref="printRef">
|
||||
<div class="content" v-for=" pageData in pageDatas"
|
||||
:style="{pageBreakAfter: 'always',width: cmToPx(pageWidth)+'px',height: cmToPx(pageHeight)+'px',marginBottom:'4px'}">
|
||||
<div v-for="i in nodes" class="node" :style="{left:i.position?.x+'px',top: i.position?.y+'px'}">
|
||||
<template v-if="i.type === 'text'">
|
||||
<TextNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
|
||||
:pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></TextNode>
|
||||
</template>
|
||||
<template v-if="i.type === 'image'">
|
||||
<ImageNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
|
||||
:pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></ImageNode>
|
||||
</template>
|
||||
<template v-if="i.type === 'barCode'">
|
||||
<BarCodeNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
|
||||
:pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></BarCodeNode>
|
||||
</template>
|
||||
<template v-if="i.type === 'QRCode'">
|
||||
<QRCodeNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
|
||||
:pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></QRCodeNode>
|
||||
</template>
|
||||
<template v-if="i.type === 'dateTime'">
|
||||
<TimeNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
|
||||
:pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></TimeNode>
|
||||
</template>
|
||||
<template v-if="i.type === 'select'">
|
||||
<SelectNode :isView="true" :isPrint="isPrint" :pageData="pageData"
|
||||
:pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"
|
||||
v-bind="i"></SelectNode>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <template #footer>-->
|
||||
<span class="dialog-footer">
|
||||
<!-- <el-button type="primary" @click="printFun">打印</el-button>-->
|
||||
<!-- <el-button type="primary" v-print="printInfoObj">打印</el-button>-->
|
||||
<el-button @click="closePrint">关闭</el-button>
|
||||
</span>
|
||||
<!-- </template>-->
|
||||
</div>
|
||||
<div id="printArea" v-if="printPngList.length>0">
|
||||
<div
|
||||
v-for="(url, index) in printPngList"
|
||||
:key="index"
|
||||
class="print-page"
|
||||
>
|
||||
<img :src="url" class="print-image" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
import html2canvas from 'html2canvas';
|
||||
import jsPDF from 'jspdf';
|
||||
import { options } from '@/views/print/tool.js';
|
||||
import TextNode from '@/views/print/nodes/textNode.vue';
|
||||
import ImageNode from '@/views/print/nodes/image.vue';
|
||||
import BarCodeNode from './nodes/barCodeNode.vue';
|
||||
import QRCodeNode from './nodes/QRCodeNode.vue';
|
||||
import TimeNode from './nodes/timeNode.vue';
|
||||
import SelectNode from './nodes/selectNode.vue';
|
||||
|
||||
const printType = ref(0);
|
||||
const printers = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: '网络打印机1'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '网络打印机2'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '网络打印机3'
|
||||
}
|
||||
]);
|
||||
const printPngList = ref([]);
|
||||
const isView = ref(true);
|
||||
|
||||
const isPrint = ref(false);
|
||||
const printRef = ref();
|
||||
const pageWidth = ref(21);
|
||||
const pageHeight = ref(29.7);
|
||||
const pageDatas = ref([{}]);
|
||||
const { cmToPx } = options;
|
||||
const nodes = ref([]);
|
||||
onMounted(() => {
|
||||
nodes.value = JSON.parse(localStorage.getItem('printNodes') || '[]');
|
||||
});
|
||||
|
||||
const printInfoObj = {
|
||||
id: 'printInfo',
|
||||
preview: false, // 是否开启预览
|
||||
beforeOpenCallback(vue) {
|
||||
console.log('触发打印工具打开前回调');
|
||||
},
|
||||
openCallback(vue) {
|
||||
console.log('触发打印工具打开的回调');
|
||||
},
|
||||
closeCallback() {
|
||||
console.log('触发关闭打印工具回调');
|
||||
},
|
||||
previewBeforeOpenCallback() {
|
||||
console.log('触发预览前回调');
|
||||
},
|
||||
previewOpenCallback() {
|
||||
console.log('触发预览的回调');
|
||||
}
|
||||
};
|
||||
const switchPrinter = (e) => {
|
||||
console.log(e);
|
||||
printType.value = e;
|
||||
};
|
||||
const printFun = (e) => {
|
||||
if (printType.value === -1) {
|
||||
isPrint.value = true;
|
||||
nextTick(() => {
|
||||
const element = printRef.value;
|
||||
let eles = element.querySelectorAll('.content');
|
||||
const pros = [];
|
||||
|
||||
eles.forEach((ele, index) => {
|
||||
pros.push(
|
||||
html2canvas(ele).then(canvas => {
|
||||
const imgData = canvas.toDataURL('image/png');
|
||||
const pdf = new jsPDF();
|
||||
pdf.addImage(imgData, 'PNG', 0, 0);
|
||||
pdf.save(`${new Date().getTime()}-${index}.pdf`);
|
||||
})
|
||||
);
|
||||
});
|
||||
Promise.all(pros).then((values) => {
|
||||
isPrint.value = false;
|
||||
});
|
||||
});
|
||||
} else if (printType.value === 0) {
|
||||
isPrint.value = true;
|
||||
printPngList.value = [];
|
||||
nextTick(() => {
|
||||
const element = printRef.value;
|
||||
let eles = element.querySelectorAll('.content');
|
||||
const pros = [];
|
||||
|
||||
eles.forEach((ele, index) => {
|
||||
pros.push(
|
||||
html2canvas(ele).then(canvas => {
|
||||
const imgData = canvas.toDataURL('image/png');
|
||||
printPngList.value.push(imgData);
|
||||
})
|
||||
);
|
||||
});
|
||||
Promise.all(pros).then((values) => {
|
||||
window.print();
|
||||
isPrint.value = false;
|
||||
printPngList.value = [];
|
||||
});
|
||||
});
|
||||
} else {
|
||||
}
|
||||
};
|
||||
const closePrint = () => {
|
||||
isView.value = false;
|
||||
};
|
||||
const openPrint = (pages, templateId) => {
|
||||
isView.value = false;
|
||||
nextTick(() => {
|
||||
nodes.value = JSON.parse(localStorage.getItem('printNodes') || '[]');
|
||||
isView.value = true;
|
||||
let pageData = [];
|
||||
if (Array.isArray(pages)) {
|
||||
pageData = pages;
|
||||
}
|
||||
if (typeof pages !== 'object' || pages === null) {
|
||||
pageData = [pages];
|
||||
}
|
||||
console.log(pageData);
|
||||
pageDatas.value = pageData || [];
|
||||
});
|
||||
};
|
||||
const printName = () => {
|
||||
if (printType.value === -1) {
|
||||
return '导出PDF';
|
||||
} else if (printType.value === 0) {
|
||||
return '本地打印';
|
||||
} else {
|
||||
let name = printers?.value?.find(e => e.id === printType?.value)?.name;
|
||||
return name || '';
|
||||
}
|
||||
};
|
||||
defineExpose({
|
||||
openPrint
|
||||
// closePrint
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
.content {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.node {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
</style>
|
||||
<style>
|
||||
.print-page {
|
||||
page-break-after: always;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.print-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* 打印样式：仅显示图片区域 */
|
||||
@media print {
|
||||
body * {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
#printArea,
|
||||
#printArea * {
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
#printArea {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.print-page {
|
||||
page-break-after: always;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue