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

发表于 由

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

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

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

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <meta name="description" content="A simple HTML5 Template">  
  6.     <meta name="author" content="dron">  
  7.     <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">  
  8.     <meta name="apple-mobile-web-app-capable" content="yes">  
  9.     <meta name="apple-mobile-web-app-status-bar-style" content="black">  
  10.     <title>变通方法实现保存文件 by dron</title>  
  11.     <style type="text/css">  
  12.       #content{   
  13.         width: 320px;   
  14.         height: 240px;   
  15.         border: 1px solid #ccc;   
  16.         -webkit-border-radius: 4px;   
  17.            -moz-border-radius: 4px;   
  18.                 border-radius: 4px;   
  19.       }   
  20.       #save-btn{   
  21.         text-decoration: none;   
  22.         display: inline-block;   
  23.         *display: inline;   
  24.         padding: 4px 12px;   
  25.         margin-bottom: 0;   
  26.         *margin-left: .3em;   
  27.         font-size: 14px;   
  28.         line-height: 20px;   
  29.         color: #333333;   
  30.         text-align: center;   
  31.         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);   
  32.         vertical-align: middle;   
  33.         cursor: pointer;   
  34.         background-color: #f5f5f5;   
  35.         *background-color: #e6e6e6;   
  36.         background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);   
  37.         background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));   
  38.         background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);   
  39.         background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);   
  40.         background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);   
  41.         background-repeat: repeat-x;   
  42.         border: 1px solid #cccccc;   
  43.         *border: 0;   
  44.         border-color: #e6e6e6 #e6e6e6 #bfbfbf;   
  45.         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);   
  46.         border-bottom-color: #b3b3b3;   
  47.         -webkit-border-radius: 4px;   
  48.            -moz-border-radius: 4px;   
  49.                 border-radius: 4px;   
  50.         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);   
  51.         filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);   
  52.         *zoom: 1;   
  53.         -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);   
  54.            -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);   
  55.                 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);   
  56.       }   
  57.     </style>  
  58. </head>  
  59. <body>  
  60.     <h1>变通方法实现保存文件 (HTML5) by dron</h1>  
  61.     <textarea id="content">测试文本，你可以随便修改，完事后点保存。</textarea>  
  62.     <p><a id="save-btn" href="" download="noname.txt">保存</a></p>  
  63.     <script>  
  64.       var content, btn;   
  65.       content = document.querySelector( "#content" );   
  66.       btn = document.querySelector( "#save-btn" );   
  67.   
  68.       content.addEventListener( "change", function(){   
  69.         var f = function(){   
  70.           btn.setAttribute( "href", "data:text/paint; utf-8," + content.value );   
  71.         }   
  72.         return f(), f;    
  73.       }() );   
  74.     </script>  
  75. </body>  
  76. </html>  
  1. da shang
    donate-alipay
               donate-weixin weixinpay

发表评论↓↓