写一个html页面,实现打印功能
时间: 2024-04-11 14:30:35 浏览: 18
好的,我可以帮你写一个基本的 HTML 页面,并添加打印功能。以下是一个示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>打印功能示例</title>
<style>
@media print {
/* 在打印时隐藏按钮 */
.print-button {
display: none;
}
}
</style>
</head>
<body>
<h1>打印功能示例</h1>
<!-- 打印按钮 -->
<button class="print-button" onclick="window.print()">打印</button>
<!-- 需要打印的内容 -->
<div id="print-content">
<p>这是需要打印的内容。</p>
<p>你可以在这里添加更多内容。</p>
</div>
<script>
// 使用 JavaScript 动态修改需要打印的内容
var printContent = document.getElementById("print-content").innerHTML;
// 可以根据需要修改打印样式
// 在按钮点击时执行打印功能
function printFunction() {
window.print();
}
</script>
</body>
</html>
```
这个示例页面中包含一个打印按钮和一个需要打印的内容区域。在点击打印按钮时,会触发 `window.print()` 方法,调用浏览器的打印功能。同时,为了在打印时隐藏按钮,我使用了 CSS 的 `@media print` 媒体查询。
你可以根据自己的需求修改需要打印的内容和页面样式。希望对你有所帮助!