https://zihuanling.github.io/tags/html/ Recent content in HTML on Coding and Life https://zihuanling.github.io/avatar.jpeg https://zihuanling.github.io/avatar.jpeg Hugo -- gohugo.io zh-cn Mon, 09 May 2022 20:52:39 +0800 https://zihuanling.github.io/posts/html-a-data-download/ Mon, 09 May 2022 20:52:39 +0800 https://zihuanling.github.io/posts/html-a-data-download/ <p>假如我们有一个json文件：<code>example.json</code>，我们想要将这个文件的连接放到网站上提供下载。</p> <p>在HTML中这样写：</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;http://lingzihuan.icu/leetcode-submissions.json&#34;</span>&gt;点击下载&lt;/<span style="color:#f92672">a</span>&gt; </span></span></code></pre></div> <a href="http://lingzihuan.icu/leetcode-submissions.json">点击下载</a> <p>当我们点击链接的时候，chrome浏览器会自动打开一个页面，然后将json文件的内容加载进来，但是，当我们想要将文件下载到本地的时候，还得自己右键点击，然后选择”另存为“。</p> <p>看过 Stack Overflow 上的提示，看到可以给其设定 <code>download</code>属性：</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;http://lingzihuan.icu/leetcode-submissions.json&#34;</span> <span style="color:#a6e22e">download</span>&gt;点击下载&lt;/<span style="color:#f92672">a</span>&gt; </span></span></code></pre></div> <a href="http://lingzihuan.icu/leetcode-submissions.json" download>点击下载</a> <p>需要注意的是，href里面的内容需要是与当前网页同源的url才可使用。</p>