每天学习一个vue插件(17)——js-file-download前言1介绍常用属性propsurlparamsfile

既然生在世界上，就希望自己能够留名于后世，做一些别人做不到的事

前言

1 介绍

常用属性 props

url

// 下载地址
:url="url"

params

// 下载参数
:params="params"

filename

// 文件名
:filename="filename"

常用事件 event

after-download

// 下载完成
@after-download="afterDownload"

2 使用

安装

npm i js-file-download --save

axios处理

import Axios from 'axios'
Axios({
  method: 'post',
  url: this.url,
  data: this.params,
  responseType: 'blob',
  headers: {
    'Content-Type': 'application/octet-stream'
  }
})

文件下载

<template>
  <div @click="download">
    <slot>
      <button>下载</button>
    </slot>
  </div>
</template>

<script>
import Axios from 'axios'
import fileDownload from 'js-file-download'
export default {
  props: {
    url: {
      type: String,
      required: true
    },
    params: {
      type: Object,
      default() {
        return {}
      }
    },
    filename: {
      type: String,
      default: 'excel'
    }
  },
  methods: {
    download() {
      Axios({
        method: 'post',
        url: this.url,
        data: this.params,
        responseType: 'blob',
        headers: {
          'Content-Type': 'application/octet-stream'
        }
      }).then(res => {
        fileDownload(res.data, this.filename)
        this.$emit('after-download')
      })
    }
  }
}
</script>

3.注意

1.axios需配置responseType为blob
2.文件损坏时，增加Content-Type请求头配置

每天学习一个vue插件(17)——js-file-download

前言

1 介绍

常用属性 props

url

params

filename

常用事件 event

after-download

2 使用

安装

axios处理

文件下载

3.注意

尾声

参考链接

往期回顾