<template>
|
<div>
|
|
<el-button id="button" type="primary" @click="handlePrint">打印版图</el-button>
|
<RectRenderer
|
ref="rectRenderer"
|
:layoutData="layoutData"
|
:gw="1400"
|
:gh="1100"
|
style="width: 100%; height: 800px; position: relative;"
|
/>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref,onMounted } from 'vue';
|
import RectRenderer from './page/RectRenderer.vue';
|
import mockLayoutData from '../../../components/pp/MockData';
|
import request from "@/utils/request";
|
import { useI18n } from "vue-i18n";
|
//const layoutData = ref(mockLayoutData);
|
const rectRenderer = ref(null);
|
|
const savedProjectNo = localStorage.getItem('projectNo');
|
const processId = savedProjectNo;
|
const layoutData = ref(null);
|
|
|
|
const selectLayout = () => {
|
request.post(`/glassOptimize/selectOptimizeResult/${processId}`)
|
.then((res) => {
|
if (res.code == 200) {
|
try {
|
const parsedData = JSON.parse(res.data.data[0].Layouts);
|
layoutData.value = parsedData;
|
} catch (error) {
|
|
|
}
|
} else {
|
|
}
|
})
|
.catch((error) => {
|
console.error("请求失败:", error);
|
ElMessage.error(t('basicData.msg.requestFailed'));
|
});
|
}
|
|
onMounted(() => {
|
selectLayout();
|
|
});
|
|
|
const handlePrint = () => {
|
// 创建一个隐藏的iframe
|
const iframe = document.createElement('iframe');
|
iframe.style.position = 'fixed';
|
iframe.style.top = '-100vh';
|
iframe.style.left = '-100vw';
|
iframe.style.width = '200%';
|
iframe.style.height = '200%';
|
document.body.appendChild(iframe);
|
|
// 将RectRenderer的内容加载到iframe中
|
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
|
iframeDoc.open();
|
iframeDoc.write(`
|
<html>
|
<head>
|
<title>Print Layout</title>
|
<style>
|
@page {
|
size: A4 landscape;
|
margin: 20mm;
|
}
|
body {
|
margin: 0;
|
padding: 0;
|
}
|
.layout-wrapper {
|
display: flex;
|
flex-direction: column;
|
}
|
.layout-container {
|
page-break-inside: avoid;
|
break-inside: avoid;
|
page-break-after: auto;
|
margin-bottom: 20mm;
|
}
|
.layout-item {
|
page-break-inside: avoid;
|
break-inside: avoid;
|
}
|
</style>
|
</head>
|
<body>
|
<div class="layout-wrapper">
|
${rectRenderer.value.$el.outerHTML}
|
</div>
|
</body>
|
</html>
|
`);
|
iframeDoc.close();
|
|
// 设置打印样式
|
const printStyle = iframeDoc.createElement('style');
|
printStyle.type = 'text/css';
|
printStyle.innerHTML = `
|
@page {
|
size: A4 landscape;
|
margin: 20mm;
|
}
|
body {
|
-webkit-print-color-adjust: exact;
|
}
|
.layout-wrapper {
|
display: flex;
|
flex-direction: column;
|
}
|
.layout-container {
|
page-break-inside: avoid;
|
break-inside: avoid;
|
page-break-after: auto;
|
margin-bottom: 20mm;
|
}
|
.layout-item {
|
page-break-inside: avoid;
|
break-inside: avoid;
|
}
|
`;
|
iframeDoc.head.appendChild(printStyle);
|
|
// 调整iframe大小以适应内容
|
const contentWidth = rectRenderer.value.$el.offsetWidth;
|
const contentHeight = rectRenderer.value.$el.offsetHeight;
|
iframe.width = contentWidth + 'px';
|
iframe.height = contentHeight + 'px';
|
|
// 执行打印
|
iframe.contentWindow.print();
|
|
// 清理
|
setTimeout(() => {
|
document.body.removeChild(iframe);
|
}, 100);
|
};
|
</script>
|
