lbk60ox 发表于 2024-6-29 16:27:55

浅析 HTML5 中的 download 属性


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">随着前端技术的发展，越来越多的业务场景中<span style="color: black;">必须</span>前端来处理文件下载。在众多的<span style="color: black;">办法</span>中，<span style="color: black;">经过</span>&lt;a&gt;标签的 download 属性实现下载是其中<span style="color: black;">平常</span><span style="color: black;">亦</span>是比较简单的一种<span style="color: black;">办法</span>。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">download 属性介绍</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">常规的&lt;a&gt;标签<span style="color: black;">经过</span> href 实现链接<span style="color: black;">转</span>，<span style="color: black;">倘若</span>只想下载文件而不是<span style="color: black;">转</span>预览，最好的方式是在&lt;a&gt;标签中添加download属性，就能很简单地实现下载操作。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">download是 HTML5 中&lt;a&gt;标签新增的一个属性，此属性会强制触发下载操作，指示浏览器下载 URL 而不是导航到它，并提示用户将其<span style="color: black;">保留</span>为本地文件，例如：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;a href="result.png" download&gt;download&lt;/a&gt;</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">倘若</span>缺少download属性，点击 "download" 会直接变成预览<span style="color: black;">照片</span>，当添加download属性后则会触发<span style="color: black;">照片</span>的下载。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">日前</span>download属性的兼容性如 <a style="color: black;">caniuse</a> 中所展示的：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-be370cf3e68ee5a788b059acc7223c4d_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">能够</span>以看到，大部分主流的浏览器基本都<span style="color: black;">已然</span>支持 download属性，而 IE 的表现一如既往的感人，<span style="color: black;">日前</span>许多 Window 系统仍然在<span style="color: black;">运用</span> IE ，这<span style="color: black;">亦</span>是许多业务需求<span style="color: black;">必须</span><span style="color: black;">思虑</span>的。这种兼容性问题限制了 download 的更广泛应用。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">动态资源下载</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">面对<span style="color: black;">有些</span>动态内容下载的业务场景，即<span style="color: black;">照片</span>等资源的<span style="color: black;">位置</span>并不是固定的（例如<span style="color: black;">有些</span>在线绘图<span style="color: black;">工具</span>所生成的<span style="color: black;">照片</span>），只<span style="color: black;">运用</span> HTML <span style="color: black;">没</span>法满足需求。为了能够满足<span style="color: black;">区别</span>的 URL 下载，<span style="color: black;">能够</span><span style="color: black;">经过</span>JS 实现一个动态触发 URL 下载的<span style="color: black;">办法</span>。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">function</span> <span style="color: black;">download</span><span style="color: black;">(</span><span style="color: black;">href</span><span style="color: black;">,</span> <span style="color: black;">filename</span><span style="color: black;">=</span><span style="color: black;">)</span> <span style="color: black;">{</span>
      <span style="color: black;">const</span> <span style="color: black;">a</span> <span style="color: black;">=</span> <span style="color: black;">document</span><span style="color: black;">.</span><span style="color: black;">createElement</span><span style="color: black;">(</span><span style="color: black;">a</span><span style="color: black;">)</span>
      <span style="color: black;">a</span><span style="color: black;">.</span><span style="color: black;">download</span> <span style="color: black;">=</span> <span style="color: black;">filename</span>
      <span style="color: black;">a</span><span style="color: black;">.</span><span style="color: black;">href</span> <span style="color: black;">=</span> <span style="color: black;">href</span>
      <span style="color: black;">document</span><span style="color: black;">.</span><span style="color: black;">body</span><span style="color: black;">.</span><span style="color: black;">appendChild</span><span style="color: black;">(</span><span style="color: black;">a</span><span style="color: black;">)</span>
      <span style="color: black;">a</span><span style="color: black;">.</span><span style="color: black;">click</span><span style="color: black;">()</span>
      <span style="color: black;">a</span><span style="color: black;">.</span><span style="color: black;">remove</span><span style="color: black;">()</span>
      <span style="color: black;">}</span>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">必须</span><span style="color: black;">重视</span>的是，代码中对创建的&lt;a&gt; 进行的 appendChild 和 remove 操作<span style="color: black;">重点</span>是为了兼容 FireFox 浏览器，在 FireFox 浏览器下调用该<span style="color: black;">办法</span><span style="color: black;">倘若</span>不将创建的&lt;a&gt;标签添加到 body 里，点击链接不会有任何反应，<span style="color: black;">没</span>法触发下载，而在 Chrome 浏览器中则不受此影响。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">以上</span>的<span style="color: black;">办法</span><span style="color: black;">能够</span>实现同源资源的下载。但在<span style="color: black;">非常多</span>场景中，还<span style="color: black;">必须</span>处理跨域资源。遗憾的是，download属性<span style="color: black;">日前</span>仅适用于同源 URL，即<span style="color: black;">倘若</span><span style="color: black;">必须</span>下载的资源<span style="color: black;">位置</span>是跨域的，download属性就会失效，点击链接会变成导航预览。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">测试：点击<a style="color: black;">下载</a>，结果只是预览而<span style="color: black;">没</span>法下载<span style="color: black;">照片</span>。</p>注： Chrome65 之前是支持 download 属性触<span style="color: black;">发帖</span>件跨域下载的，之后则严格遵循同源策略，<span style="color: black;">没</span>法再<span style="color: black;">经过</span> download 属性触发跨域资源的下载。而 FireFox <span style="color: black;">始终</span>不支持跨域资源的 download 属性下载。<h2 style="color: black; text-align: left; margin-bottom: 10px;">文件命名问题</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">download属性不仅<span style="color: black;">能够</span>触发下载，<span style="color: black;">亦</span>能指定下载文件名：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;a href="test.png" download="joker.png"&gt;下载&lt;/a&gt;</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">倘若</span>下载文件的后缀与源文件保持一致，<span style="color: black;">能够</span>设置缺省文件名：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;a href="test.png" download="joker"&gt;下载&lt;/a&gt;</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">笔者曾遇到过一个问题，<span style="color: black;">经过</span>&lt;a&gt;标签触发跨域资源下载，代码与<span style="color: black;">以上</span>的 download <span style="color: black;">办法</span>基本相同，只是在设置download属性的<span style="color: black;">地区</span>有点</p>




星☆雨 发表于 2024-8-25 10:56:16

百度seo优化论坛 http://www.fok120.com/

wrjc1hod 发表于 2024-10-12 22:54:03

我完全赞同你的观点，思考很有深度。

j8typz 发表于 2024-10-14 03:21:27

你的见解真是独到，让我受益匪浅。
页: [1]
查看完整版本: 浅析 HTML5 中的 download 属性