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

本笔记用于整理前端开发中不依赖框架即可实现的高频实用功能，涵盖文件下载、打印、HTML 原生属性以及浏览器内置 JS API。
适合作为：日常开发速查 / 基础能力沉淀 / 新人教学笔记

一、`a` 标签文件下载功能

1. 核心原理

利用 HTML5 的 download 属性，
让浏览器在点击链接时触发下载行为，而不是直接预览资源。

2. 基础用法

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

3. 注意事项（重点）

（1）跨域限制

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

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

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

（2）兼容性

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

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

1const blob = new Blob([data]);
2const url = URL.createObjectURL(blob);
3
4const a = document.createElement("a");
5a.href = url;
6a.download = "文件名.xlsx";
7a.click();
8
9URL.revokeObjectURL(url);

二、前端打印功能

1. 全页打印（基础）

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

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

2. 指定区域打印

HTML

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

CSS（打印核心）

1@media print {
2  body * {
3    visibility: hidden;
4  }
5
6  .print-content,
7  .print-content * {
8    visibility: visible;
9  }
10
11  .print-content {
12    position: absolute;
13    left: 0;
14    top: 0;
15    width: 100%;
16  }
17}

3. 打印进阶优化

（1）纸张与边距

1@media print {
2  @page {
3    size: A4;
4    margin: 2cm;
5  }
6}

（2）打印背景色

1@media print {
2  .print-content {
3    -webkit-print-color-adjust: exact;
4    print-color-adjust: exact;
5  }
6}

（3）分页控制

1@media print {
2  .page-start {
3    page-break-before: always;
4  }
5
6  .page-end {
7    page-break-after: always;
8  }
9
10  .no-break {
11    page-break-inside: avoid;
12  }
13}

（4）打印字体

1@media print {
2  body {
3    font-family: Arial, sans-serif;
4    font-size: 12pt;
5  }
6}

三、常用 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

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

⚠️ 需 HTTPS / localhost。

兼容旧方案（已废弃）

document.execCommand("copy");

2. 全屏功能

1function enterFullscreen(el) {
2  el.requestFullscreen?.() ||
3  el.webkitRequestFullscreen?.() ||
4  el.msRequestFullscreen?.();
5}
6
7function exitFullscreen() {
8  document.exitFullscreen?.() ||
9  document.webkitExitFullscreen?.() ||
10  document.msExitFullscreen?.();
11}

📌 必须由用户点击触发。

3. 本地存储

localStorage（长期）

1localStorage.setItem("key", "value");
2localStorage.getItem("key");
3localStorage.removeItem("key");
4localStorage.clear();

sessionStorage（会话级）

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

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

4. 地理定位

1navigator.geolocation.getCurrentPosition(
2  (pos) => {
3    console.log(pos.coords.latitude, pos.coords.longitude);
4  },
5  (err) => {
6    console.log(err.message);
7  }
8);

⚠️ HTTPS + 用户授权。

5. 系统通知（Notification）

申请权限

await Notification.requestPermission();

发送通知

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

注意

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

结语

前端的底层能力，来自对浏览器本身的理解。
熟练掌握这些原生功能，能显著提升开发效率与代码质量。

《前端原生能力速查笔记（HTML + 浏览器 API 实战篇）》是转载文章，点击查看原文。