在前端开发中，有的时候我们不需要和后台去交互，而是直接将文档类型文件直接下载到本地，比如像一些不需要数据交互的官方网站，当里面有提供帮助文档下载的时候，就需要我们实现本地文档下载的功能。而这个功能完全可以由前端来实现，一起来看看：
假设我们的目录结构是这样的：
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需特殊处理，方法需自行研究。
以上只是提供一种方法，也是本人开发过程中感觉好用的一种，没有绝对性。文章有不足之处还请见谅。
网友评论