使用Blob实现文件下载-CFANZ编程社区

大家都知道 a 标签是超链接，点击会跳转至 href 指定的地址。

当我们给 a 标签加上 download 属性后，则会去 href 指定的url下载文件(这里一定是同源的)

new Blob() 存放二进制资源

window.URL.createObjectURL() 会将 Blob存放的二进制资源转为url地址，如此而已

思路：

1. 首先通过 document.createElement('a') 创建一个a标签用 link 来接受

2. 通过 link.setAttribute('download', 'filename.html') 或者直接 link.download = 'filename.html' 去给 a 标签添加 download 属性

3. 通过 window.URL.createObjectURL 将 blob二进制资源 转为 url地址并赋给link.href

4. 然后 执行 link.click() 即可下载

demo1

let html = `
  <div>
    <div>
      <p style="color: red;font-size: 20px;">张三</p>
    </div>
  </div>
`
const link = document.createElement('a')
link.setAttribute('download', 'zhangsan.html')
// link.download = 'zhangsan.html'
link.href = window.URL.createObjectURL(new Blob([html], { type: 'text/html' }))
link.click()

这段代码即可直接将 html 判断下载，下载的文件名称就是 zhangsan.html

demo2

<body>
  <input type="file" id="fileInput">
  <script>
    window.onload = function () {
      fileInput.onchange = function (e) {
        console.log(e.target.files[0])
        const link = document.createElement('a')
        link.href = window.URL.createObjectURL(e.target.files[0])
        // link.setAttribute('download', '1111.html')
        link.download = '1111.html'
        link.click()
      }
    }
  </script>
</body>

这个demo是咱们去本地选中一个html文件，通过 e.target.files[0] 拿到的就是继承自 Blob 的二进制对象(所以不需要 new Blob()), 即可再次去下载该文件

项目中的导出功能方法封装

export function download (url, params) {
  $http({
    method: 'get',
    url: url,
    params: params,
    responseType: 'blob' //arraybuffer
  }).then(response => {
    if (!response) {
      return
    }
    let link = document.createElement('a')
    link.href = window.URL.createObjectURL(new Blob([response.data]))
    link.target = '_blank'
    let filename = response.headers['content-disposition']
    link.download = decodeURI(filename)  // 下载的文件名称
    document.body.appendChild(link)  // 添加创建的 a 标签 dom节点
    link.click()  // 下载
    document.body.removeChild(link)  // 移除节点
  }).catch(error => {})
}

上面有用到decodeURI, 这里就简单扩充一下 decodeURL 和 encodeURI

encodeURI() 函数可把字符串作为 URI 进行编码

decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码

例子：

let a = '李四'
encodeURI(a)  //'%E6%9D%8E%E5%9B%9B'

let a = encodeURI('李四') // '%E6%9D%8E%E5%9B%9B'
decodeURI(a)  // '李四'

demo1

demo2

项目中的导出功能 方法封装

项目中的导出功能方法封装