3月 28 2015 • Javascript

不需借助server，将浏览器缓存中的数据下载到本地硬盘

前段时间参与了一个HTML5的项目，期间有个需求是把存储在浏览器indexedDB中的数据保存到本地硬盘。大家都知道，传统的下载都是通过server下载到本地的，再加上W3C规定浏览器不能访问本地文件系统等原因，这个需求搞了两天才搞定，下面是大概思路，前提是浏览器需要支持HTML5FileSystem API。

1、首先从indexedDB中读取到数据，然后再用HTML5的FileSystem API把数据放入浏览器sandbox中，数据存储方式可以是多种文本类型文件，我的是csv格式文件。

2、HTML5的FileSystem API可以返回存储在sandbox中文件的URL，此URL是一种特殊的URL，指向浏览器沙盒中的一个文件，然后把此URL设置为一个链接的href就可以了，当用户点击此链接的时候，文件就会保存在本地硬盘上了。

大致代码如下：

fs.root.getFile("inventory.csv",{create : true},function(fileEntry) {
  fileEntry.createWriter(function(fileWriter) {
    fileWriter.onwriteend = function(e) {
      $("#buttonId").attr("href",fileEntry.toURL());
    };
    fileWriter.onerror = function(e) {};
    if(inventoryData !== null){
      $.each(inventoryData,function(index, value){
        temp += CommonUtil.toCSVField(String(value.ITEMNUM)) + "," +
          CommonUtil.toCSVField(String(value.NK_SPAREPARTSGROUP)) + "," +
          CommonUtil.toCSVField(String(value.ITEMDESCRIPTION))+ "," +
          CommonUtil.toCSVField(value.NK_SMS.DESC) + "," + 
          CommonUtil.toCSVField(String(value.CURBALTOTAL))+ "," + 
          CommonUtil.toCSVField(String(value.SSTOCK)) + "," +
          CommonUtil.toCSVField(String(value.SSTOCK - value.CURBALTOTAL))+ "," +
          CommonUtil.toCSVField(String(value.NK_DELIVERY_WAITING)) + "," +
          CommonUtil.toCSVField(String(value.ISSUEUNIT)) + "\r\n";
        });
    }
    var bb = new Blob([temp]);
    fileWriter.write(bb);
  }, null);
}, null);