js本地文件下载

在前端开发中，有的时候我们不需要和后台去交互，而是直接将文档类型文件直接下载到本地，比如像一些不需要数据交互的官方网站，当里面有提供帮助文档下载的时候，就需要我们实现本地文档下载的功能。而这个功能完全可以由前端来实现，一起来看看：

假设我们的目录结构是这样的：

js

img

css

page

file

这四个都是文件夹，里面放着相关文件，只有file目录是我们需要下载用的，在file目录里可以再放一下目录：

fileinfo.txt

test1.doc

test2.pdf

test3.ppt

test4.xlsx

fileinfo.txt文件中就可以写我们的目录信息:

{

      "datainfo":[

              {"url":"file/test1.doc","name":"test1.doc"},

              {"url":"file/test2.pdf","name":"test2.pdf"},

              {"url":"file/test3.ppt","name":"test3.ppt"},

              {"url":"file/test4.xlsx ","name":"test4.xlsx"},

      ]

}

信息格式最好是json格式的，因为我们要用ajax去请求的，json方便处理。

当我们在html页面中需要实现下载时首先需要ajax去获取txt文件得到里面所存储的json对象，然后用下边这段js代码来进行点击下载：

function fileDownload(url,name){

      var nowA =document.createElement('a');

      nowA.setAttribute('href',url);

      nowA.setAttribute('download',name);

      nowA.style.display= 'none';

      document.body.appendChild(nowA);

      nowA.click();

      document.body.removeChild(nowA);

}

这样当你在页面中点击时会跳转出下载文件的页面，下载功能完成。

如果是本地文件打开方式可能看不到效果，会出现跨域请求的错误，因为ajax是不支持跨域的，所以我们需要用服务器地址或者localhost本地服务的地址打开就能成功。因为开发完成都是放在服务器上的，而我们的文件都是同一目录下的，所以不用担心跨域的问题。

经过测试，目前这个方法对常见浏览器都是支持的，只有ie是会在页面中打开文件，因为本次开发不考虑ie浏览器的问题，所以对ie就没有进行特殊处理。在网上也查看了一下有关ie的方法，但是好像都不靠谱，对于那种用label转换格式的方法下载的文件会有错误打不开的情况，所以说这种方法还是最好用的，ie需特殊处理，方法需自行研究。

以上只是提供一种方法，也是本人开发过程中感觉好用的一种，没有绝对性。文章有不足之处还请见谅。