JS 下载文件方法分享(解决图片文件无法直接下载和 IE兼容问题)

场景简介

由于业务需要，经常遇到下载各类文件的需求，其中最头疼的莫过于前端下载图片了，直接给个图片文件地址会变成直接打开图片，而不是弹窗提示另存为，研究了下前端实现文件下载最便捷的方法还是创建 a 标签，写入download 属性实现点击下载，但这在 ie 浏览器上的实现又与一般浏览器不同，于是摸索之后写了个通用的下载方法，既可用来下载文件也可下载图片，希望能够帮到大家。

npm 安装使用

npm install --save ly-downloader

使用时需传入3个参数 download(type, data, name)：

• type: 1 或 2（ 用于判断传入的是地址还是canvas对象 ）
• data: type = 1 时传入文件地址； type = 2 时传入一个canvas对象（ 配合html2canvas使用 ）
• name: 下载图片默认文件名（ type = 1 时设置''为地址默认文件名, type = 2 时 name 不能为空 ） 注：name 参数虽然只有在下载文件类型为图片时生效，但为避免出错都需要传入一个值 例：download(1, url, '') 或 download(2, canvas对象, '图片附件')

以 Vue 中组件使用为例

import download from 'ly-downloader'
export default {
  methods: {
    // url = '你的文件地址'
    _download (url) {
      download(1, url, '文件名')
    },
  }
}
复制代码

思路简介

• 创建 a 标签，href 传入文件地址，download 写上文件名，触发点击事件实现文件另存为（设置文件名对非图片类型文件无效）
• 图片类型文件使用地址下载会直接打开，需要将图片地址利用 canvas 获取 baase64 格式文件，再由 base64 转换为 blob 类型，最后利用URL.createObjectURL() 方法获取 blob 文件的地址，此类型地址传入 a 标签可实现不打开直接下载
• type = 2 这种情况是个人经常遇到页面截图下载的场景，配合插件html2canvas 来使用非常方便