前端原生能力速查笔记（HTML + 浏览器 API 实战篇）

本笔记用于整理前端开发中不依赖框架即可实现的高频实用功能 ，涵盖文件下载、打印、HTML 原生属性以及浏览器内置 JS API。

适合作为：日常开发速查 / 基础能力沉淀 / 新人教学笔记

---

一、a 标签文件下载功能

1. 核心原理

利用 HTML5 的 download 属性，

让浏览器在点击链接时触发下载行为，而不是直接预览资源。

---

2. 基础用法

<!-- 直接下载（使用原文件名） -->
<a href="files/demo.pdf" download>下载 PDF</a>
<!-- 自定义下载文件名 -->
<a href="files/image.jpg" download="封面图.jpg">
  下载图片
</a>

---

3. 注意事项（重点）

（1）跨域限制

• 同源资源：download 生效
• 跨域资源：浏览器会忽略 download

✅ 正确方案：后端设置响应头

Content-Disposition: attachment; filename="文件名.ext"

---

（2）兼容性

• ✅ Chrome / Edge / Firefox / Safari
• ❌ IE 不支持

---

（3）接口返回文件（Blob 下载）

const blob = new Blob([data]);
const url = URL.createObjectURL(blob);

const a = document.createElement("a");
a.href = url;
a.download = "文件名.xlsx";
a.click();

URL.revokeObjectURL(url);

---

二、前端打印功能

1. 全页打印（基础）

<button onclick="window.print()">打印页面</button>

📌 window.print() 是浏览器唯一标准打印入口。

---

2. 指定区域打印

HTML

<div class="print-content">
  <h3>打印标题</h3>
  <p>需要打印的内容</p>
</div>
<button onclick="window.print()">打印</button>

CSS（打印核心）

@media print {
  body * {
    visibility: hidden;
  }

  .print-content,
  .print-content * {
    visibility: visible;
  }

  .print-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}

---

3. 打印进阶优化

（1）纸张与边距

@media print {
  @page {
    size: A4;
    margin: 2cm;
  }
}

（2）打印背景色

@media print {
  .print-content {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

（3）分页控制

@media print {
  .page-start {
    page-break-before: always;
  }

  .page-end {
    page-break-after: always;
  }

  .no-break {
    page-break-inside: avoid;
  }
}

（4）打印字体

@media print {
  body {
    font-family: Arial, sans-serif;
    font-size: 12pt;
  }
}

---

三、常用 HTML 原生实用属性

|------------|------------------|------------|
| 标签 | 属性 | 功能 |
| img | loading="lazy" | 图片懒加载 |
| input | required | 表单非空校验 |
| video | controls | 默认播放控件 |
| textarea | placeholder | 输入提示 |
| select | multiple | 多选下拉 |
| form | autocomplete | 自动填充 |
| label | for | 聚焦绑定 input |
| details | <summary> | 原生折叠面板 |

📌 能用 HTML 解决的问题，优先不用 JS。

---

四、浏览器内置 JavaScript API

1. 复制到剪贴板

推荐：Clipboard API

async function copyText() {
  await navigator.clipboard.writeText("要复制的内容");
  alert("复制成功");
}

⚠️ 需 HTTPS / localhost。

---

兼容旧方案（已废弃）

document.execCommand("copy");

---

2. 全屏功能

function enterFullscreen(el) {
  el.requestFullscreen?.() ||
  el.webkitRequestFullscreen?.() ||
  el.msRequestFullscreen?.();
}

function exitFullscreen() {
  document.exitFullscreen?.() ||
  document.webkitExitFullscreen?.() ||
  document.msExitFullscreen?.();
}

📌 必须由用户点击触发。

---

3. 本地存储

localStorage（长期）

localStorage.setItem("key", "value");
localStorage.getItem("key");
localStorage.removeItem("key");
localStorage.clear();

sessionStorage（会话级）

sessionStorage.setItem("temp", "123");

⚠️ 只能存字符串，对象需 JSON。

---

4. 地理定位

navigator.geolocation.getCurrentPosition(
  (pos) => {
    console.log(pos.coords.latitude, pos.coords.longitude);
  },
  (err) => {
    console.log(err.message);
  }
);

⚠️ HTTPS + 用户授权。

---

5. 系统通知（Notification）

申请权限

await Notification.requestPermission();

发送通知

new Notification("通知标题", {
  body: "通知内容",
  icon: "icon.png"
});

注意

• 必须 HTTPS（localhost 例外）
• 用户可随时关闭权限
• IE 不支持

---

结语

前端的底层能力，来自对浏览器本身的理解。

熟练掌握这些原生功能，能显著提升开发效率与代码质量。