前端开发学习资料模板前端小白进阶之路-功能篇

导读在前端开发中，有的时候我们不需要和后台去交互，而是直接将文档类型文件直接下载到本地，比如像一些不需要数据交互的官方网站，当里面有提供帮助文档下载的时候，就需....

在前端开发中，有的时候我们不需要和后台去交互，而是直接将文档类型文件直接下载到本地，比如像一些不需要数据交互的官方网站，当里面有提供帮助文档下载的时候，就需要我们实现本地文档下载的功能而这个功能完全可以由前端来实现，一起来看看：，接下来我们就来聊聊关于前端开发学习资料模板?以下内容大家不妨参考一二希望能帮到您!

前端开发学习资料模板

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

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

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需特殊处理，方法需自行研究。

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