Flow/inspect-front
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改报表打印不显示图片问题

Browse Source
This commit is contained in:
lxd 2025-03-18 18:28:02 +08:00
parent c00c53a596
commit 12b0c106f8
2 changed files with 98 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/templates/report-template.html
View File

@ -1145,7 +1145,7 @@
containers.forEach(container => {
const imageContainer = container.querySelector('.pdf-image-container');
if (imageContainer.style.display !== 'block') {
allRendered = false;
allRendered = false;
}
});

129
src/views/summary/reprot-print/components/ReportPreview.vue
View File

@ -12,7 +12,7 @@
<div class="iframe-container">
<iframe
v-if="dialogVisible"
src="\templates\report-template.html"
src="\inspect\templates\report-template.html"
frameborder="0"
style="width: 100%; height: 100%; border: none"
@load="handleIframeLoad"
@ -182,7 +182,7 @@ const handleIframeLoad = async () => {
}
// 更新超声检查报告
const ultrasoundData = reportData.data.find((item) => item.itemName === '超声')
const ultrasoundData = reportData.data.find((item) => item.itemName === 'US')
if (ultrasoundData) {
const ultrasoundSummary = doc.querySelector('.ultrasound-exam .report-summary')
if (ultrasoundSummary) {
@ -208,7 +208,7 @@ const handleIframeLoad = async () => {
}
// 生化检查
const biochemData = reportData.data.find((item) => item.itemName === '生化')
const biochemData = reportData.data.find((item) => item.itemName === '生化检查')
if (biochemData) {
const biochemSummary = doc.querySelector('.report-item:nth-of-type(4) .report-summary p')
if (biochemSummary) {
@ -237,7 +237,7 @@ const handleIframeLoad = async () => {
})
// 心电图
const ecgData = reportData.data.find((item) => item.type === 'ecg')
const ecgData = reportData.data.find((item) => item.itemName === '心电图')
if (ecgData) {
const ecgSummary = doc.querySelector('.report-item:last-child .report-summary')
if (ecgSummary) {
@ -265,19 +265,19 @@ const handleIframeLoad = async () => {
if (item.data) {
let reportTitle = ''
switch (item.itemName || item.type) {
case '血常规':
case 'cbc':
reportTitle = '血常规检查报告'
break
case 'ecg':
reportTitle = '心电图检查报告'
break
case '生化':
case 'bt':
reportTitle = '生化检查报告'
break
case 'US':
reportTitle = '超声检查报告'
break
case '尿常规':
case 'rt':
reportTitle = '尿常规检查报告'
break
default:
@ -317,43 +317,98 @@ const handleIframeLoad = async () => {
}
}
const handlePrint = () => {
const iframe = document.querySelector('iframe')
// 修改等待渲染完成的函数，添加更多检查和日志
const waitForAllPDFsRendered = () => {
return new Promise((resolve) => {
const checkRendering = () => {
const containers = document.querySelectorAll('.pdf-container');
let allDone = true;
console.log('开始检查PDF渲染状态...');
containers.forEach((container, index) => {
const imageContainer = container.querySelector('.pdf-image-container');
const img = imageContainer?.querySelector('img');
console.log(`检查第${index + 1}个PDF:`, {
hasImageContainer: !!imageContainer,
hasImage: !!img,
imageComplete: img?.complete,
imageDisplay: imageContainer?.style.display,
imageSrc: img?.src
});
// 更严格的检查条件
if (!imageContainer ||
!img ||
!img.complete ||
imageContainer.style.display !== 'block' ||
!img.src) {
allDone = false;
console.log(`第${index + 1}个PDF未完成渲染`);
}
});
if (allDone) {
console.log('所有PDF都已渲染完成，可以进行打印');
resolve(true);
} else {
console.log('PDF还在渲染中，继续等待...');
setTimeout(checkRendering, 1000); // 增加检查间隔到1秒
}
};
checkRendering();
});
};
// 修改打印处理函数
const handlePrint = async () => {
const iframe = document.querySelector('iframe');
if (iframe && iframe.contentWindow) {
// 在iframe内部创建一个加载提示
const iframeDoc = iframe.contentWindow.document
const loadingMessage = iframeDoc.createElement('div')
loadingMessage.style.position = 'fixed'
loadingMessage.style.top = '50%'
loadingMessage.style.left = '50%'
loadingMessage.style.transform = 'translate(-50%, -50%)'
loadingMessage.style.padding = '20px'
loadingMessage.style.background = 'rgba(0, 0, 0, 0.7)'
loadingMessage.style.color = 'white'
loadingMessage.style.borderRadius = '5px'
loadingMessage.style.zIndex = '9999'
loadingMessage.innerHTML = '正在准备打印，请稍候...'
iframeDoc.body.appendChild(loadingMessage)
const iframeDoc = iframe.contentWindow.document;
console.log('准备打印报告，等待2秒...')
// 显示加载提示
const loadingMessage = iframeDoc.createElement('div');
loadingMessage.style.position = 'fixed';
loadingMessage.style.top = '50%';
loadingMessage.style.left = '50%';
loadingMessage.style.transform = 'translate(-50%, -50%)';
loadingMessage.style.padding = '20px';
loadingMessage.style.background = 'rgba(0, 0, 0, 0.7)';
loadingMessage.style.color = 'white';
loadingMessage.style.borderRadius = '5px';
loadingMessage.style.zIndex = '9999';
loadingMessage.innerHTML = '正在准备打印，请稍候...';
iframeDoc.body.appendChild(loadingMessage);
// 延迟2秒后打印
setTimeout(() => {
try {
// 获取所有需要转换的PDF容器
const containers = iframeDoc.querySelectorAll('.pdf-container');
console.log('开始转换PDF为图片...');
// 执行所有PDF转换
for (const container of containers) {
const pdfUrl = container.getAttribute('data-pdf-url');
if (pdfUrl) {
await iframe.contentWindow.renderPDFAsImage(pdfUrl, container);
console.log(`PDF转换完成: ${pdfUrl}`);
}
}
console.log('所有PDF转换完成，开始打印');
// 移除加载提示
iframeDoc.body.removeChild(loadingMessage)
iframeDoc.body.removeChild(loadingMessage);
// 执行打印
iframe.contentWindow?.print()
// 打印完成后关闭窗口（如果是在新窗口中打开的）
setTimeout(() => {
if (window.opener) {
window.close()
}
}, 1000)
}, 4000)
iframe.contentWindow?.print();
handleClose()
} catch (error) {
console.error('PDF转换过程出错:', error);
iframeDoc.body.removeChild(loadingMessage);
}
}
}
};
const handleClose = () => {
dialogVisible.value = false