记一次pdf文件下载的过程

下载功能, 可以用downloadjs插件来做, 支持下载各种文件.

今天主要记录下载pdf的axios配置和downloadjs使用

//main.js
import Vue from 'vue'
import download from 'downloadjs'
Vue.prototype.$download = download
//组件中使用
axios(
    {
      method: 'get',
      baseURL: window.location.origin + window.location.pathname,
      url: 'api/trainingData/download',
      params: {
        backFileId: row.backFileId
      },
      responseType: 'blob', // 一定要写, 否则没办法正确解析数据
      headers: {
        'Auth-Token': getToken() //携带token
      }
    }
).then(res => {
    //res.data 返回的blob数据
    this.$download(res.data, row.datasetName + '.pdf', 'application/pdf')
})

原理是responseType: 'blob'这个配置会告诉服务端返回blob格式的数据,downloadjs在拿到返回的blob对象后, 使用windows.URL.createObjectUrl(blob)将blob对象转换成对象url, 然后创建a标签去下载.

知识点补充:

windows.URL.createObjectUrl(),这个方法是将对象数据转换成对象url, 参数只能是对象, 比如File, Blob, MediaSource, 这个方法可以实现input选择本地图片后, 不需要上传服务器就可以预览图片的功能, 将选择的File文件使用该方法转换成对象url就可以了.

与之相对的是windows.URL.revokeObjectURL(objectUrl), 这个方法是释放转换的objectUrl的, 释放占用的内存.

new Blob() 可以将字符串转换为blob数据, 所以上面的代码还可以写成

//组件中使用
axios(
    {
      method: 'get',
      baseURL: window.location.origin + window.location.pathname,
      url: 'api/trainingData/download',
      params: {
        backFileId: row.backFileId
      },
      responseType: 'arraybuffer', // 一定要写, 否则没办法正确解析数据
      headers: {
        'Auth-Token': getToken() //携带token
      }
    }
).then(res => {
    //将字符串转成blob对象
    const data = new Blob([res.data],{ type: 'application/pdf' })
    this.$download(data, row.datasetName + '.pdf', 'application/pdf')
})