如何同时创建带有各自对应配图的下载按钮与打印按钮？

直接用原生HTML、CSS、JavaScript即可实现简洁的「图标+文字」组合操作按钮，无需依赖第三方UI组件库，可灵活适配页面样式。

核心结构搭建 #

采用弹性布局实现两个按钮的水平并列排列，每个按钮内部拆分图标区域与文字区域，保证对齐效果：

<div class="btn-wrapper">
  <!-- 下载按钮 -->
  <button class="op-btn download-op">
    <img src="assets/icons/download.png" alt="下载图标" class="op-icon">
    <span>下载文件</span>
  </button>
  <!-- 打印按钮 -->
  <button class="op-btn print-op">
    <img src="assets/icons/print.png" alt="打印图标" class="op-icon">
    <span>打印页面</span>
  </button>
</div>

图标资源建议直接存放在项目本地静态资源目录下，不依赖外部在线资源，避免出现资源加载失效的问题。

样式适配 #

通过CSS控制按钮的圆角、间距、交互效果，匹配简洁规整的视觉效果：

/* 按钮容器布局 */
.btn-wrapper {
  display: flex;
  gap: 12px;
}
/* 按钮通用样式 */
.op-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s ease;
}
/* 图标尺寸统一约束 */
.op-icon {
  width: 16px;
  height: 16px;
}
/*  hover状态交互 */
.op-btn:hover {
  border-color: #2563eb;
  color: #2563eb;
  background: #eff6ff;
}

功能逻辑绑定 #

给两个按钮绑定对应的实际操作：

// 下载按钮触发逻辑
document.querySelector('.download-op').addEventListener('click', () => {
  // 替换为实际需要下载的文件地址
  const fileUrl = '/docs/export-file.pdf';
  const link = document.createElement('a');
  link.href = fileUrl;
  link.download = '导出文档.pdf';
  link.click();
});
// 打印按钮触发逻辑
document.querySelector('.print-op').addEventListener('click', () => {
  // 调用浏览器原生打印能力
  window.print();
});

灵活调整提示 #

• 若想减少静态资源请求，可把图片图标替换为内联SVG代码，和按钮样式融合度更高
• 可根据页面整体风格调整按钮的圆角大小、内边距、配色方案，不需要改动结构
• 若需要两个按钮宽度保持一致，可给.op-btn添加固定min-width属性，实现排版对齐

内容的提问来源于stack exchange，提问作者Lav Gupta