前言

如果有从网上下载过资料的应该有这样的体验，当我们点击下载的时候会弹出一个新的页面，然后很快就关闭了，并会将文件下载下来。

那么这样的效果是如何实现的呢？其实很简单，通过代码生成一个新的表单，该表单会弹出一个新的页面，在数据传输完毕后自动关闭。

代码实现

我们结合AngularJS来讲解如何实现这一功能。

• url必须存在

下载页面是一个具体的http请求，所以必须存在请求的url，如果url不存在则无法下载。

• 生成新的form表单

通过angular.element('<form>')方法生成一个新的form表单，并设置请求的method，url与target

form表单属性

• form表单参数

在下载的时候，我们可能会携带参数，同样可以通过代码去控制。通过angular.element('<input>')生成一个个input元素，然后设置name和value属性，再将生成的input元素添加至form中。

生成input元素

• 表单提交

通过form.submit()方法提交表单，带有name属性的input元素的value值会提交至请求的url中

表单提交

存在的问题

• 问题
  

在chrome浏览器升级至最新版本时，如果使用上述的代码会发现，在下载时点击按钮无效，并会在console控制台有以下的提示：

问题提示

• 问题原因

chrome官方也对form表单的下载问题作出了解释，是因为form表单脱离了document文档对象，会导致form提交无效

• 解决方法

将from添加至document文档流中，如果是原生的Javascript代码，则在submit前添加以下代码

原生Javascript代码

如果是AngularJS代码，则在submit前添加以下代码

AngularJS代码

添加以上的代码后，form表单下载就完成了。

完整代码

以下是通过AngularJS完成form表单下载功能的代码

完整代码

总结

今天这篇文章主要是讲的如何通过AngularJS完成form表单下载的功能，你有收获吗？