Compare commits
No commits in common. '863830d6ca86ee4f5a9b0cced515ec9837e83e4e' and '252d670ed04e8dff2b4fce10835ce7c8af0de998' have entirely different histories.
863830d6ca
...
252d670ed0
@ -1,261 +0,0 @@
|
|||||||
<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