常见的文件下载方式
在做文档排版相关的网页时，经常需要让用户能直接下载PDF、Word或Excel这类文件。最简单的方法就是在链接里直接指向文件地址，浏览器会自动触发下载。
比如你有一个排版好的说明书文档存放在服务器上，只需要这样写：
<a href="/docs/manual.pdf" download>点击下载使用手册</a>这里的 download 属性很关键，它告诉浏览器不要尝试在当前页打开文件，而是直接保存到本地。
动态生成内容并下载
有时候文档不是现成的，而是用户临时填写的内容，比如在线填表后想导出为文本文件。这时候可以用JavaScript把内容拼出来，再模拟一次下载。
假设用户输入了一段排版文字，想保存成 .txt 文件：
function downloadText(content, filename) {
const blob = new Blob([content], { type: 'text/plain' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = filename;
link.click();
URL.revokeObjectURL(link.href);
}调用这个函数就能把任意文本存到用户电脑上。比如你在页面里有个文本框，点“导出”按钮就执行：
downloadText(document.getElementById('editor').value, 'my-doc.txt');导出HTML内容为文件
有些场景下，用户在网页上排好了格式，希望把这块区域的内容单独保存下来。可以提取HTML代码，然后打包成 .html 文件下载。
例如选中某个 div 的 innerHTML：
const content = document.querySelector('#output').innerHTML;
const htmlContent = `<!DOCTYPE html><html><head><meta charset="utf-8"><title>排版文档</title></head><body>${content}</body></html>`;
downloadText(htmlContent, 'formatted.html');这样用户就能把当前看到的排版结果完整保存下来，以后还能用浏览器打开查看。
处理图片类文档下载
如果页面里有截图或者图表，也可以让它们支持一键下载。比如画布（canvas）生成的图像：
const canvas = document.getElementById('chart');
const link = document.createElement('a');
link.href = canvas.toDataURL('image/png');
link.download = 'chart.png';
link.click();这招在做数据报表或图文混排工具时特别实用，用户做完图顺手就能保存。
跨域资源下载要注意的问题
如果文件不在自己的服务器上，比如CDN上的PDF，直接加 download 可能无效，浏览器会跳转而不是下载。这种情况下得通过后端中转，或者用fetch拉取后再构造Blob下载。
例如从外部获取一个公开文档：
fetch('https://example.com/report.pdf')
.then(res => res.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'report.pdf';
a.click();
URL.revokeObjectURL(url);
});虽然多了一步，但体验上还是无缝的，用户只管点下载就行。