vue(nodejs)文件下载 - Mon, Apr 15, 2019

使用vue(nodejs)进行文件下载的集中方式

• 1. 概述
• 2. 设计架构
• 3. vue中文件下载的实现

1. 概述

实现需求：后台服务生成证书，前端将证书下载。整个过程需要使用token进行认证。

2. 设计架构

grpc: 生成证书，并通过字符串形式发送给swagger

swagger: 使用zip将证书进行压缩发送给vue

vue：使用axios调用api获取证书

3. vue中文件下载的实现

由于http api中带有token认证所以不能直接通过a标签的方式对文件进行下载。

1. 在js中通过调用http api获取压缩包的字符串 如果使用axios直接调用api会导致获取的字符串乱码。因为并不是每个byte都有对应的UTF8或ASCII编码，所以需要设置axios的config。

   // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
   responseType: 'blob', // blob 默认json
   

2. 创建压缩包的Blob

   var blob = new Blob([res.data], {
     type: 'application/zip'
   })
   

3. 获取临时Blob的地址

   var url = window.URL.createObjectURL(blob)
   

4. 创建临时a标签

   var linkElement = document.createElement('a')
   

5. 通过临时a标签下载临时Blob

   linkElement.setAttribute('href', url)
   linkElement.setAttribute('download', filename)
   linkElement.click()
   

6. 删除临时a标签

   linkElement.remove()