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

前言

1 介绍

常用属性 props

url

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

params

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

filename

// 文件名
:filename="filename"

常用事件 event

after-download

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

2 使用

安装

import fileDownload from 'js-file-download'

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.注意

尾声

你不会跟我一样，此刻，正望着天上的月亮发呆吧~

晚安 ^_^

参考链接

• js-file-download 文档
• js-file-download 文件损坏问题
• axios 文档

往期回顾

• 每天学习一个vue插件(1)——better-scroll
• 每天学习一个vue插件(2)——vue-awesome-swiper
• 每天学习一个vue插件(3)——eslint + prettier + stylelint
• 每天学习一个vue插件(4)——v-viewer
• 每天学习一个vue插件(5)——postcss-pxtorem
• 每天学习一个vue插件(6)——momentjs
• 每天学习一个vue插件(7)——hammerjs
• 每天学习一个vue插件(8)——mcanvas
• 每天学习一个vue插件(9)——MathJax
• 每天学习一个vue插件(10)——Vue-APlayer
• 每天学习一个vue插件(11)——vue-drag-resize
• 每天学习一个vue插件(12)——vue-fullpage
• 每天学习一个vue插件(13)——html2canvas
• 每天学习一个vue插件(14)——vue-pull-to
• 每天学习一个vue插件(15)——vue-content-placeholders
• 每天学习一个vue插件(16)——vue-video-player