JS实现打印机预览功能
原创
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS打印预览功能</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 打印专用样式 -->
<style type="text/tailwindcss">
@layer utilities {
.print-hidden {
@apply hidden;
}
}
</style>
<style>
/* 打印样式 - 只在打印时生效 */
@media print {
/* 打印时隐藏不需要的元素 */
.no-print {
display: none !important;
}
/* 设置打印页面样式 */
body {
font-size: 14px;
line-height: 1.6;
}
/* 确保打印内容适合页面 */
.print-container {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-shadow: none !important;
}
}
</style>
</head>
<body class="bg-gray-100 p-6">
<div class="max-w-4xl mx-auto bg-white rounded-lg shadow-lg p-8">
<!-- 页面标题和打印按钮 -->
<div class="mb-8 flex flex-col md:flex-row justify-between items-start md:items-center border-b pb-4">
<div>
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
