Layui 卡片不支持原生导出，但可用 html2canvas + jsPDF 实现图片或 PDF 导出；服务端生成更稳定；浏览器打印法最快捷。
Layui 本身没有为 card（卡片）组件提供原生的“导出为图片或 PDF”功能。它的 exportFile 和 print 是针对 table 模块设计的，不适用于普通 .layui-card 容器。但你可以用通用前端方案快速实现，核心思路是：把卡片 DOM 转成图片 → 再转 PDF，或直接用 html2canvas + jsPDF 一步到位。
一、导出卡片为图片（PNG/JPEG）
适用场景：截图存档、分享预览、轻量报告
技术栈：html2canvas（渲染 DOM 为 canvas） + 原生 toDataURL
// 假设你的卡片容器是：<div class="layui-card" id="myCard">...</div>
const card = document.getElementById('myCard');
html2canvas(card, {
useCORS: true, // 允许跨域图片（如头像、图标）
scale: 2, // 提升清晰度（适配高清屏）
logging: false
}).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.download = '卡片截图.png';
link.href = imgData;
link.click();
});⚠️ 注意：
- 卡片内若有
iframe、video、canvas或跨域未开启 CORS 的图片，可能无法捕获； - 若卡片含
position: fixed或transform复杂样式，建议临时加html2canvas兼容类（如style="transform: none !important;"）。
二、导出卡片为 PDF（A4 排版）
适用场景：正式文档、打印交付、带页眉页脚
技术栈：html2canvas + jsPDF
import { jsPDF } from 'jspdf';
const card = document.getElementById('myCard');
html2canvas(card, { useCORS: true, scale: 2 }).then(canvas => {
const imgWidth = 210; // A4 宽度 mm
const imgHeight = (canvas.height * imgWidth) / canvas.width;
const pdf = new jsPDF('p', 'mm', 'a4');
pdf.addImage(
canvas.toDataURL('image/png'),
'PNG',
0,
0,
imgWidth,
imgHeight
);
pdf.save('卡片内容.pdf');
});✅ 优点：无需后端，纯前端；保留所有 CSS 样式（包括阴影、圆角、渐变）。
❌ 局限：长卡片会压缩变形（单页 A4），若内容超一页，需手动分页逻辑（较复杂，一般不推荐）。
三、更稳的替代方案：服务端生成 PDF
适合生产环境，尤其卡片内容含动态图表、权限敏感数据或需统一水印/页眉。
做法：
- 前端点击导出时，跳转 URL：
/api/card/export?cardId=123&format=pdf - 后端（如 Java/Spring Boot + iText，或 Node.js + Puppeteer）渲染该卡片 HTML 模板（服务端直取数据+模板），生成 PDF 并返回
Content-Disposition: attachment
优势：
- 避免前端内存溢出（大卡片+多图易卡死）；
- 支持页码、页眉、加密、字体嵌入；
- 可控性强（比如隐藏“编辑按钮”，只导出展示态）。
四、快捷小技巧：直接打印为 PDF（零代码）
如果只是临时导出、不要求自动命名或批量处理：
- 在卡片区域右键 → “检查元素”，临时给
<div class="layui-card"> 加个唯一 ID（如 <code>id="export-card"）； - 浏览器按
Ctrl+P（Win）或Cmd+P（Mac）； - 打印设置中选择「目标打印机」为“另存为 PDF”，并勾选「背景图形」；
- 在「更多设置」里指定范围为
#export-card（部分浏览器支持 CSS@media print { body > * { display: none; } #export-card { display: block; } }控制）。
这个方法快、准、不写代码，适合内部快速交付。
不需要额外插件、不依赖 Layui 版本，以上任一方式都可当天接入。关键在选对场景：要快用截图法，要正式用服务端，要兼容性好就走浏览器打印。
