完成仓库模块
This commit is contained in:
Zy
264
src/utils/print.ts
Normal file
264
src/utils/print.ts
Normal file
@@ -0,0 +1,264 @@
|
||||
/**
|
||||
* 🔥 Vue后台专用 - 打印指定DIV（样式完全还原 + 无侧边栏/导航）
|
||||
* 适配 Element Plus / scoped样式 / 后台管理系统
|
||||
*/
|
||||
export function printVueDiv(elementId: string, title: string = '打印') {
|
||||
const el = document.getElementById(elementId);
|
||||
if (!el) {
|
||||
console.error('未找到打印元素');
|
||||
return;
|
||||
}
|
||||
|
||||
const win = window.open('', '_blank', 'width=1000,height=800');
|
||||
if (!win) return;
|
||||
|
||||
// ==============================================
|
||||
// 【核心1】复制 全局样式 + Element Plus 样式
|
||||
// ==============================================
|
||||
const styles = Array.from(document.querySelectorAll('link[rel="stylesheet"], style:not([scoped])'))
|
||||
.map((item) => item.outerHTML)
|
||||
.join('');
|
||||
|
||||
// ==============================================
|
||||
// 【核心2】手动注入打印区域的 scoped 样式（关键！）
|
||||
// ==============================================
|
||||
const printScopeStyle = `
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
body {
|
||||
margin: 10px;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
font-size: 12px; /* 全局缩小字体（核心） */
|
||||
font-family: "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
/* 强制不显示后台侧边栏/导航 */
|
||||
.el-container, .el-aside, .el-header, .el-footer {
|
||||
display: none !important;
|
||||
}
|
||||
/* 打印区域基础样式 */
|
||||
#print-content {
|
||||
width: 100% !important;
|
||||
}
|
||||
/* 标题样式（缩小） */
|
||||
#print-content h3 {
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
margin: 10px 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
#print-content p {
|
||||
font-size: 12px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
/* ====================== 表格核心优化 ====================== */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100% !important;
|
||||
table-layout: fixed; /* 固定表格布局，防止列变形 */
|
||||
}
|
||||
table td, table th {
|
||||
border: 1px solid #333;
|
||||
font-size: 9px; /* 表格字体最小化 */
|
||||
text-align: center;
|
||||
white-space: nowrap; /* ✅ 禁止文字自动换行（核心） */
|
||||
overflow: hidden;
|
||||
}
|
||||
/* 适配合并列 */
|
||||
td[colspan], th[colspan] {
|
||||
white-space: normal !important;
|
||||
}
|
||||
|
||||
/* 打印纸张设置 */
|
||||
@page {
|
||||
size: A4;
|
||||
margin: 8mm; /* 缩小页边距 */
|
||||
}
|
||||
|
||||
.navtitle {
|
||||
text-align: center;
|
||||
height: 41px;
|
||||
line-height: 14px;
|
||||
color: rgba(48, 49, 51, 1);
|
||||
font-size: 20px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
p {
|
||||
line-height: 14px;
|
||||
color: rgba(48, 49, 51, 1);
|
||||
font-size: 9px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
table {
|
||||
margin-top: 15px;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
color: rgba(48, 49, 51, 1);
|
||||
}
|
||||
tr {
|
||||
border: 1px solid #dddddd;
|
||||
}
|
||||
td {
|
||||
border: 1px solid #dddddd;
|
||||
height: 50px;
|
||||
line-height: 45px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
font-weight: 450;
|
||||
}
|
||||
|
||||
.footertr td {
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.foorter {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
width: 85%;
|
||||
margin: 0 auto;
|
||||
gap: 30px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
|
||||
// ==============================================
|
||||
// 【核心3】写入新窗口
|
||||
// ==============================================
|
||||
win.document.write(`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>${title}</title>
|
||||
<meta charset="UTF-8">
|
||||
${styles}
|
||||
${printScopeStyle}
|
||||
</head>
|
||||
<body>
|
||||
${el.outerHTML} <!-- 直接用innerHTML复制完整结构 -->
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
|
||||
win.document.close();
|
||||
win.onload = () => {
|
||||
setTimeout(() => {
|
||||
win.print();
|
||||
win.close();
|
||||
}, 300);
|
||||
};
|
||||
}
|
||||
/**
|
||||
* 打印指定 DOM 元素（绝对不会打印其他内容）
|
||||
* @param elementId 目标 div 的 id
|
||||
* @param title 打印标题（可选）
|
||||
*/
|
||||
export function printDivPure(elementId: string, title: string = '打印') {
|
||||
// 1. 获取目标元素
|
||||
const targetElement = document.getElementById(elementId);
|
||||
if (!targetElement) {
|
||||
console.error(`未找到 id 为 "${elementId}" 的元素`);
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. 保存原页面的所有内容
|
||||
const originalBodyContent = document.body.innerHTML;
|
||||
|
||||
// 3. 克隆目标元素
|
||||
const cloneElement = targetElement.cloneNode(true) as HTMLElement;
|
||||
|
||||
// 4. 【核心】把 body 替换成只有目标元素的内容
|
||||
document.body.innerHTML = '';
|
||||
|
||||
// 添加打印专用样式
|
||||
const printStyle = document.createElement('style');
|
||||
printStyle.innerHTML = `
|
||||
@page {
|
||||
size: A4;
|
||||
margin: 10mm;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(printStyle);
|
||||
|
||||
// 插入目标元素
|
||||
document.body.appendChild(cloneElement);
|
||||
|
||||
// 5. 打印
|
||||
window.print();
|
||||
|
||||
// 6. 【核心】打印完恢复原页面内容
|
||||
setTimeout(() => {
|
||||
document.body.innerHTML = originalBodyContent;
|
||||
document.head.removeChild(printStyle);
|
||||
// 强制刷新一下 Vue 组件（避免恢复后事件丢失）
|
||||
window.location.reload();
|
||||
}, 100);
|
||||
}
|
||||
|
||||
/**
|
||||
* 打印指定 DOM 元素（新窗口法加强版，不刷新页面）
|
||||
* @param elementId 目标 div 的 id
|
||||
* @param title 打印标题（可选）
|
||||
*/
|
||||
export function printDivNewWindow(elementId: string, title: string = '打印') {
|
||||
const targetElement = document.getElementById(elementId);
|
||||
if (!targetElement) {
|
||||
console.error(`未找到 id 为 "${elementId}" 的元素`);
|
||||
return;
|
||||
}
|
||||
|
||||
const printWindow = window.open('', '_blank', 'width=800,height=1000');
|
||||
if (!printWindow) {
|
||||
console.error('无法打开新窗口，请检查浏览器弹窗拦截设置');
|
||||
return;
|
||||
}
|
||||
|
||||
// 【关键】深度克隆目标元素，包括所有子节点
|
||||
const clone = targetElement.cloneNode(true) as HTMLElement;
|
||||
|
||||
printWindow.document.write(`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>${title}</title>
|
||||
<meta charset="UTF-8">
|
||||
<!-- 复制所有外部 CSS -->
|
||||
${Array.from(document.querySelectorAll('link[rel="stylesheet"]'))
|
||||
.map((l) => l.outerHTML)
|
||||
.join('')}
|
||||
<!-- 复制所有 style 标签 -->
|
||||
${Array.from(document.querySelectorAll('style'))
|
||||
.map((s) => s.outerHTML)
|
||||
.join('')}
|
||||
<style>
|
||||
body { margin: 20px; padding: 0; }
|
||||
@page { size: A4; margin: 10mm; }
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
`);
|
||||
|
||||
// 把克隆的元素插入到新窗口
|
||||
printWindow.document.body.appendChild(clone);
|
||||
printWindow.document.close();
|
||||
|
||||
// 等待加载完成后打印
|
||||
printWindow.onload = () => {
|
||||
printWindow.focus();
|
||||
setTimeout(() => {
|
||||
printWindow.print();
|
||||
printWindow.close();
|
||||
}, 300);
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user