这是我参与更文挑战的第10天，活动详情查看： 更文挑战
大家好，我是前端队长Daotin，想要获取更多前端精彩内容，关注我，解锁前端成长新姿势。
以下正文：
平时我们在前端项目中都是怎么下载资源的？比如一个word文档等，这里简单总结了4种方式。
1、a标签url下载
exportUrl 是下载地址，点击之后直接在当前界面下载文件
<a :href="exportUrl" class="g-button simple">导出</a>
2、把地址传入浏览器地址中触发下载
window.open(exportUrl, '_self'); // 本窗口打开下载，地址栏的地址并不会改变
window.open(exportUrl, '_blank'); // 新开窗口下载
3、form表单提交下载
form表单的提交本质上是发送了一次HTTP请求。
<form>元素定义了如何发送数据。它的所有属性都是为了让您配置当用户点击提交按钮时发送的请求。两个最重要的属性是action和method。
action属性
这个属性定义了发送数据要去的位置。它的值必须是一个有效的URL。如果没有提供此属性，则数据将被发送到包含这个表单的页面的URL。
method属性
该属性定义了如何发送数据。HTTP协议提供了几种执行请求的方法；HTML表单数据可以通过许多不同的方法进行数据传输，其中最常见的是GET方法和POST方法。
想要form提交数据，需要把form的action设置为接口地址，method一般设置为post，post到后台的数据为input的属性 name = key，value = value的形式。
- 如果有多个key、value的值要传递，那么就设置多个input来分别储存单个的key、value；
- 如果请求的接口可以不需要参数，那么input还是必须要一个，如果不要得话会引起接口报错。
<form action="http://xxx.com" method="post">
<div>
<label for="say">What greeting do you want to say?</label>
<input name="say" id="say" value="Hi">
</div>
<div>
<label for="to">Who do you want to say it to?</label>
<input name="to" id="to" value="Mom">
</div>
<div>
<button>Send my greetings</button>
</div>
</form>
发送的表单数据为：
POST / HTTP/2.0
Host: foo.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 13
say=Hi&to=Mom
下面是封装的一个jQuery插件，使用form的形式发起http请求：
$.download = function (url, params, method) {
if (url && params) {
var inputs = '', input, form = $('<form />').attr("action", url).attr("method", (method || "post"));
$.each(params, function (k, v) {
input = $("<input type='hidden' />");
input.attr("name", k).attr("value", v);
form.append(input);
});
form.appendTo('body').submit().remove();
}
};
使用方法：
var url = "/app/lottery/awards/export", params = { FILETYPE: "excel07", FRMID: that.FRMID };
$.download(url, params, "post");
参考链接：developer.mozilla.org/zh-CN/docs/…
4、a标签download属性下载
a标签的
download是HTML5标准新增的属性，作用是指示浏览器下载URL而不是导航到URL，因此将提示用户将其保存为本地文件。
代码示例：
<a href="http://ww2.sinaimg.cn/large/4b4d632fgw1f1hhza4495j20ku0rsjxs.jpg" download>下载</a>
注意：此属性仅适用于同源 URL，跨域的资源无效。
那么如何解决跨域文件？
尽管 HTTP URL 需要位于同一源中，但是可以使用 blob: URL 和 data: URL ，以方便用户下载使用 JavaScript 生成的内容以解决跨域问题。
跨域资源下载：
// 下载一个文本文件
const downloadText = (text, filename = '') {
const a = document.createElement('a')
a.download = filename
// 文本txt类型
const blob = new Blob([text], {type: 'text/plain'})
// text指需要下载的文本或字符串内容
a.href = window.URL.createObjectURL(blob)
// 会生成一个类似blob:http://localhost:8080/d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串
document.body.appendChild(a)
a.click()
a.remove()
}
Q&A
你在前端项目中都是怎么下载文件的？欢迎再评论区和我交流吧！
（完）
最近热门文章：
以上，如果你看了觉得对你有所帮助，就点个赞叭，这样Daotin也有更新下去的动力，跪谢各位父老乡亲啦~~~ 听说喜欢点赞的人，一个月内都会有好运降临哦 ~~
