web 另类方法实现“另存为”功能_前端

web 另类方法实现“另存为”功能

代码：


  <div class="container-fluid">
    <div class="row">
      <div class="col-md-3">
        <div class="form-group">
          <label>文件内容</label>
          <textarea class="form-control" rows="4" id="content">测试文本，你可以随便修改，完事后点保存。</textarea>  
        </div>

        <div class="form-group">
          <label>文件名</label>
          
        </div>

        <a id="save-btn" class="btn btn-default" role="button">保存</a>
      </div>
    </div>
  </div>

  
    void function(){
      var content, fileName, saveBtn;

      content = document.querySelector( '#content' );
      fileName = document.querySelector( '#file-name' );
      saveBtn = document.querySelector( '#save-btn' );

      content.addEventListener( 'change', function self(){
        saveBtn.setAttribute( 'href', 'data:text/paint; utf-8,' + content.value );
        return self;
      }() );

      fileName.addEventListener( 'change', function self(){
        saveBtn.setAttribute( 'download', fileName.value );
        return self;
      }() );
    }();

原理讲解：

HTML5 的 FileReader 带给我们很强大的文件只读访问能力，可是在 HTML5 新增的 JS 中却没有发现有方便的另存到本地文件的相关 API，以往的办法要么调用浏览器的 save as 命令（兼容程度不详），要么将内容提交到服务器，由服务器附加 content-type: application/octet-stream 头并原文打回来实现。

偶然间，发现 HTML5 的标签有了一个新属性，叫 download，取值是一个文件名，当一个带有 download 属性的链接被点击时，其形为不再是一个网页跳转，而变成将目标以指定的文件名另存到本地，兼容性还不错的样子。

可是你想啊，的 href 值是可以随便改的，也就是说要另存的文件内容可以通过 JS 的方式轻松生成，对其指定一个 datauri 就可以决定要保存的文件内容了，配合 base64，甚至可以产生一个二进制文件！

原理简单，实现无比容易，就不在这儿贴代码了，戳我可以看看 live demo。