前端实现文件下载方法总结

文件下载

浏览网页时，我们经常能够碰到文件下载的场景，那么，针对前端开发者，该如何实现文件下载，以下是总结的某些方法。

1.通过使用window.open下载文件

2.通过a标签的download属性进行文件下载：

使用方法即给href赋值为下载文件的资源链接地址，之后点击即可下载相应文件,可以给下载后的文件重新命名。这种方法比较简单，但也有一些弊端，在打开例如vedio，mp3还有一些网上存在的文件不会进行下载会直接打开

兼容性
同源性：如果前端和后端不在同一个ip端口下，使用a标签加download属性的方式，浏览器会直接打开文件。

3，使用组件进行文件下载
通过FileSaver进行文件下载（以下以vuejs环境为例）：

// 引入“file-saver”包中的saveAs函数（前提是已通过npm下载file-saver包）
import { saveAs } from  'file-saver'
    // 下载文件
    download () {
    // 当需要点击某个标签触发文件下载时，直接调用以下方法即可（其中this.fileUrl为文件的链接，this.fileName为文件的名称，包含文件后缀）
      saveAs(this.fileUrl, this.fileName)
    }

FileSaver的开源地址为：[https://github.com/eligrey/FileSaver.js]