我们在项目开发过程中，经常会遇到下载功能；基于我使用过的方法做了一个总结，然后写下这篇文章作为记录！

一、使用 a 标签（get请求）
a标签是最简单的方法，只需要把 文件的地址 或 接口 给 a 标签的 href 属性，可以为 a 标签添加 download 属性来指定下载的文件名；可省略download 属性，如果省略浏览器会自动识别源文件名。

<a href="文件地址" download='文件名'>下载</a>
//url 文件地址 或 接口地址
function downLoadFile(url) {
    let a = document.createElement('a')
    a.href = url;
    a.download = '文件名'
    a.click();
优点：
 1、在文件是 txt 、png 、jpg 等这些浏览器支持打开的文件，不会下载而是直接打开文件，这时候加上download 属性就可以下载；
 缺点：
 1、需要知道下载地址；
 2、不能下载跨域下的浏览器可浏览的文件；
 3、不能进行鉴权；
 
二、window.open()方法（get请求）
 
//url 文件地址 或 接口地址
function downLoadFile() {
	let url = '/xxx/xxx'; //接口
    window.location.href = url;
优点：
 1、简单直接；
 缺点：
 1、无法知道下载的进度；
 2、会出现URL长度限制问题和编码问题；
 3、不能添加header，不能进行鉴权；
 4、在文件是 txt 、png 、jpg 等这些浏览器支持打开的文件，不会下载，而是直接打开文件；
 
三、通过form表单提交的方式（get请求）
 动态生成一个form表单，利用表单提交功能实现下载
 
//url 文件地址 或 接口地址
//data 请求参数：[{key:name,key1:value}]
function downLoadFile(url,data){
	let form = document.createElement('form');
	for(let i in data){
		let input = document.createElement('input');
		input.name = data[i].key;
		input.value = data[i].key1;
		form.appendChild(input)
	form.style.display = 'none';
	form.method = "GET";//请求方式
	form.action = 'url'； //下载文件地址
	document.body.appendChild(form);
	form.submit();
	document.body.removeChild(form);
优点：
 1、传统方法，兼容性好，不会出现URL长度限制问题；
 缺点：
 1、无法知道下载的进度；
 2、在文件是 txt 、png 、jpg 等这些浏览器支持打开的文件，不会下载而是直接打开文件；
 
四、通过iframe（get请求，地址拼接参数）
 动态生成一个iframe，利用iframe有一个src属性，其本质就是发送http请求。（该方法可一次下载多个文件）
 
//url 文件地址 或 接口地址
//id 参数id
function downLoadFile(){
	let iframe= document.createElement('iframe');
	iframe.src = `${item.url}?id=${id}`;
	iframe.style.display = 'none'
	document.body.appendChild(iframe);
	setTimeout(()=>{
		iframe.remove();
	},2000)
缺点：
 1、兼容问题；
 2、在文件是 txt 、png 、jpg 等这些浏览器支持打开的文件，不会下载而是直接打开文件；
 
五、使用blob格式配合a标签（post请求）
 将文件转化成 Blob 二进制对象，然后再配合a标签进行下载。
 
return new Promise((resolve, reject) => {
    this.$http.defaults.headers['content-type'] = 'application/json;charset=UTF-8'
    this.$http({
      method: 'post',
      url: '/xxx/xxx', // 接口地址
      data: data, // 参数
      responseType: 'blob' // 表明返回服务器返回的数据类型
    }).then(response => {
      	if(response.headers.filename != undefined){
      		resolve(response.data)
	        let blob = new Blob([response.data], {
	          type: 'application/vnd.ms-excel'
	        let fileName = Date.parse(new Date()) + '.xlsx'
	        if (window.navigator.msSaveOrOpenBlob) {
	          navigator.msSaveBlob(blob, fileName)
	        } else {
	          var link = document.createElement('a')
	          link.href = window.URL.createObjectURL(blob)
	          link.download = fileName
	          let evt = document.createEvent('MouseEvents')
	          evt.initEvent('click',true,true)
	          link.dispatchEvent(evt)
	          //释放内存
	          window.URL.revokeObjectURL(link.href)
      	}else{
      		this.$message.error("数据为空！")
      err => {
        reject(err)
优点：
 1、可以设置header，也就可以添加鉴权；
 2、可以直接下载浏览器可浏览的文件；
 缺点：
 1、IE10以下不可用；
                                    This library is a tiny JavaScript + Flash library that allows you to generate files on the fly, in the browser, without server interaction. Web applications that allow you to generate vCards, color palettes, custom code, etc would benefit from using this library. In addition to increasing speed (no round trip to the server) this solution can reduce the database and server load of existing web applications. This is not a library to ‘force download’ a file from a server. It does not interact with a server at all.
                                    " size="small" type="success" @click="submitUpload">上传到服务器选取文件responseType: "blob" // 表明返回服务器返回的数据类型。
                                    对于文件的下载，可以说是一个十分常见的话题，前端的很多项目中都会有这样的需求，比如 highChart 统计图的导出，在线图片编辑中的图片保存，在线代码编辑的代码导出等等。而很多时候，我们只给了一个链接，用户需要右键点击链接，然后选择“另存为”，这个过程虽说不麻烦，但还是需要两步操作，倘若用户想保存页面中的多个链接文件，就得重复操作很多次，最常见的就是英语听力网站上的音频下载，手都要点麻！
本文的目的是介绍如何利用 javascript 进行多文件的下载，也就是当用户点击某个链接或者按钮的时候，同时下载多个文件。这里的“同时”用的不是很准确，在现代浏览器中可以实现多文件的并行下载，而在一些老版
                                    bignumber.min.js是一个用于任意精度算术的 JavaScript 库。
众所周知，数字运算的精度问题是一个让人很旦疼的问题，而java中有BigDecimal类对数字精度问题进行处理，经过一番查询，发现前段有一个宝藏精度处理类bignumber。亲测好用。
众所周知，数字运算的精度问题是一个让人很旦疼的问题，而java中有BigDecimal类对数字精度问题进行处理，经过一番查询，发现前段有一个宝藏精度处理类bignumber。亲测好用。
众所周知，数字运算的精度问题是一个让人很旦疼的问题，而java中有BigDecimal类对数字精度问题进行处理，经过一番查询，发现前段有一个宝藏精度处理类bignumber。亲测好用。
众所周知，数字运算的精度问题是一个让人很旦疼的问题，而java中有BigDecimal类对数字精度问题进行处理，经过一番查询，发现前段有一个宝藏精度处理类bignumber。亲测好用。
bignumber.min.js是一个用于任意精度算术的 JavaScript 库。bignumber.min.js是一个用于任意精度算术的 JavaScript 库。
网上大多数是叫你使用a链接，初学者很多时候很懵，点击下载的时候直接就打开文件的链接了，根本没办法下载
a链接没错，通常需要处理一下，直接上代码
  const a_link = document.createElement("a");  // 生成一个a链接
  fetch(link)    // 括号里是文件链接
    .then((res) => res.blob())
     .then((blob) => {
          // 将链接地址字符内容转变成
	<button onClick="download()">a标签下载</button>
	<script>
		function download(url = 'http:www.xxx.com/download?name=file.pdf', fileName = '未知文件') {
	      const a = document.createElement('a');
	      a.style.display = '
　　最近有一个非项目的小需求，就是将项目开发分工文件化，方便后期管理维护。但是开发时，分工安排都是以json格式记录的，所以就做了一个将json数据以csv格式下载到本地。
 代码如下:
<!DOCTYPE html>
    <title>download csv</title>
        [removed][removed]
        <script type=”text/javascript” src=”download.js”
                                    小程序 crypto-js。
CryptoJS是谷歌开发的一个纯javascript写的前端加密类库插件。
目前crypto-js已支持的算法有：MD5、SHA-1、SHA-256、AES、RSA、Rabbit、MARC4、HMAC、HMAC-MD5、HMAC-SHA1、HMAC-SHA256、PBKDF2等。
 crypto-js插件可以非常方便的在前端进行明文加解密等操作。