修改看板和打印设置
夜笙歌
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