完善pdf比例
This commit is contained in:
@@ -445,7 +445,7 @@ export const ExamSignPanel = ({ examId, onBusyChange }: ExamSignPanelProps) => {
|
|||||||
// 清空容器
|
// 清空容器
|
||||||
canvasContainerRef.current.innerHTML = '';
|
canvasContainerRef.current.innerHTML = '';
|
||||||
|
|
||||||
const scale = 3.0;
|
const scale = 3;
|
||||||
|
|
||||||
for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
|
for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
|
||||||
const page = await pdf.getPage(pageNum);
|
const page = await pdf.getPage(pageNum);
|
||||||
@@ -460,6 +460,8 @@ export const ExamSignPanel = ({ examId, onBusyChange }: ExamSignPanelProps) => {
|
|||||||
canvas.width = viewport.width;
|
canvas.width = viewport.width;
|
||||||
canvas.style.display = 'block';
|
canvas.style.display = 'block';
|
||||||
canvas.style.marginBottom = '10px';
|
canvas.style.marginBottom = '10px';
|
||||||
|
canvas.style.maxWidth = '100%';
|
||||||
|
canvas.style.height = 'auto';
|
||||||
canvas.className = 'mx-auto border rounded-lg shadow-sm';
|
canvas.className = 'mx-auto border rounded-lg shadow-sm';
|
||||||
|
|
||||||
canvasContainerRef.current.appendChild(canvas);
|
canvasContainerRef.current.appendChild(canvas);
|
||||||
@@ -552,6 +554,8 @@ export const ExamSignPanel = ({ examId, onBusyChange }: ExamSignPanelProps) => {
|
|||||||
canvas.width = viewport.width;
|
canvas.width = viewport.width;
|
||||||
canvas.style.display = 'block';
|
canvas.style.display = 'block';
|
||||||
canvas.style.marginBottom = '10px';
|
canvas.style.marginBottom = '10px';
|
||||||
|
canvas.style.maxWidth = '100%';
|
||||||
|
canvas.style.height = 'auto';
|
||||||
canvas.className = 'mx-auto border rounded-lg shadow-sm';
|
canvas.className = 'mx-auto border rounded-lg shadow-sm';
|
||||||
|
|
||||||
daojiandanCanvasContainerRef.current.appendChild(canvas);
|
daojiandanCanvasContainerRef.current.appendChild(canvas);
|
||||||
@@ -644,6 +648,8 @@ export const ExamSignPanel = ({ examId, onBusyChange }: ExamSignPanelProps) => {
|
|||||||
canvas.width = viewport.width;
|
canvas.width = viewport.width;
|
||||||
canvas.style.display = 'block';
|
canvas.style.display = 'block';
|
||||||
canvas.style.marginBottom = '10px';
|
canvas.style.marginBottom = '10px';
|
||||||
|
canvas.style.maxWidth = '100%';
|
||||||
|
canvas.style.height = 'auto';
|
||||||
canvas.className = 'mx-auto border rounded-lg shadow-sm';
|
canvas.className = 'mx-auto border rounded-lg shadow-sm';
|
||||||
|
|
||||||
addItemBillCanvasContainerRef.current.appendChild(canvas);
|
addItemBillCanvasContainerRef.current.appendChild(canvas);
|
||||||
@@ -700,6 +706,8 @@ export const ExamSignPanel = ({ examId, onBusyChange }: ExamSignPanelProps) => {
|
|||||||
canvas.width = viewport.width;
|
canvas.width = viewport.width;
|
||||||
canvas.style.display = 'block';
|
canvas.style.display = 'block';
|
||||||
canvas.style.marginBottom = '10px';
|
canvas.style.marginBottom = '10px';
|
||||||
|
canvas.style.maxWidth = '100%';
|
||||||
|
canvas.style.height = 'auto';
|
||||||
canvas.className = 'mx-auto border rounded-lg shadow-sm';
|
canvas.className = 'mx-auto border rounded-lg shadow-sm';
|
||||||
|
|
||||||
container.appendChild(canvas);
|
container.appendChild(canvas);
|
||||||
@@ -762,6 +770,8 @@ export const ExamSignPanel = ({ examId, onBusyChange }: ExamSignPanelProps) => {
|
|||||||
canvas.width = viewport.width;
|
canvas.width = viewport.width;
|
||||||
canvas.style.display = 'block';
|
canvas.style.display = 'block';
|
||||||
canvas.style.marginBottom = '10px';
|
canvas.style.marginBottom = '10px';
|
||||||
|
canvas.style.maxWidth = '100%';
|
||||||
|
canvas.style.height = 'auto';
|
||||||
canvas.className = 'mx-auto border rounded-lg shadow-sm';
|
canvas.className = 'mx-auto border rounded-lg shadow-sm';
|
||||||
|
|
||||||
container.appendChild(canvas);
|
container.appendChild(canvas);
|
||||||
@@ -791,7 +801,7 @@ export const ExamSignPanel = ({ examId, onBusyChange }: ExamSignPanelProps) => {
|
|||||||
}, [showAddItemBillPreview, addItemBillUrl]);
|
}, [showAddItemBillPreview, addItemBillUrl]);
|
||||||
|
|
||||||
const handlePrint = () => {
|
const handlePrint = () => {
|
||||||
if (!pdfBlobUrl || !pdfReady || !canvasContainerRef.current) return;
|
if (!pdfBlobUrl || !pdfReady || !canvasContainerRef.current || !previewPdf) return;
|
||||||
|
|
||||||
// 创建打印窗口
|
// 创建打印窗口
|
||||||
const printWindow = window.open('', '_blank');
|
const printWindow = window.open('', '_blank');
|
||||||
@@ -805,13 +815,16 @@ export const ExamSignPanel = ({ examId, onBusyChange }: ExamSignPanelProps) => {
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>知情同意书打印</title>
|
<title>${previewPdf.pdf_name || '知情同意书打印'}</title>
|
||||||
<style>
|
<style>
|
||||||
@media print {
|
@media print {
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
.print-button, .close-button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
img {
|
img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
page-break-after: always;
|
page-break-after: always;
|
||||||
@@ -825,6 +838,37 @@ export const ExamSignPanel = ({ examId, onBusyChange }: ExamSignPanelProps) => {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
.print-button, .close-button {
|
||||||
|
padding: 4px 12px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
.print-button {
|
||||||
|
background-color: #2563eb;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.print-button:hover {
|
||||||
|
background-color: #1d4ed8;
|
||||||
|
}
|
||||||
|
.close-button {
|
||||||
|
background-color: transparent;
|
||||||
|
color: #374151;
|
||||||
|
}
|
||||||
|
.close-button:hover {
|
||||||
|
background-color: #e5e7eb;
|
||||||
|
}
|
||||||
|
.button-container {
|
||||||
|
position: fixed;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
img {
|
img {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -833,6 +877,10 @@ export const ExamSignPanel = ({ examId, onBusyChange }: ExamSignPanelProps) => {
|
|||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div class="button-container">
|
||||||
|
<button class="close-button" onclick="window.close()">关闭</button>
|
||||||
|
<button class="print-button" onclick="window.print()">打印</button>
|
||||||
|
</div>
|
||||||
`);
|
`);
|
||||||
|
|
||||||
// 将每个 canvas 转换为图片并添加到打印窗口
|
// 将每个 canvas 转换为图片并添加到打印窗口
|
||||||
@@ -869,7 +917,7 @@ export const ExamSignPanel = ({ examId, onBusyChange }: ExamSignPanelProps) => {
|
|||||||
|
|
||||||
// 渲染PDF到临时canvas
|
// 渲染PDF到临时canvas
|
||||||
const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
|
const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
|
||||||
const scale = 3.0;
|
const scale = 1.0;
|
||||||
const canvasImages: string[] = [];
|
const canvasImages: string[] = [];
|
||||||
|
|
||||||
for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
|
for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
|
||||||
|
|||||||
Reference in New Issue
Block a user