download 数据下载/导出

标准文件下载/导出功能，根据提供位置的内容构建文件流并自动开始下载，下载过程中默认开启全屏遮罩，并在下载完成后自动关闭

安装

安装依赖

# 聚合包
npm i -S @plugins-core/main
# 独立包
npm i -S @plugins-core/download

项目应用

// src/config/plugins.js

import Vue from 'vue'
import { post } from '@/config/settings/http'

// 聚合包
import { Download } from '@plugins-core/main'
// 独立包
import Download from '@plugins-core/download'

// 全局安装并指定用于数据请求的函数
Vue.use(Download, {
  http: post
})

旧版包

安装依赖

npm i -S @plugins/core

项目应用

// src/config/plugins.js
import Vue from 'vue'
import { Download } from '@plugins/core'

Vue.use(Download)

属性 （prop）

组件功能属性

url 必填

• 类型：string

数据接口位置

params

• 类型：object

需要传递的业务参数集，参数规格如下

{
  // 数据编号集，通常对应数据表格选中行的键值
  ids: string[] | number[],
  // 业务参数集合
  where: object
}

mask

• 类型：boolean
• 默认：true

在文件下载/导出开始时，是否显示全屏遮罩

maskText

• 类型：string
• 默认：'文件导出中，请稍候…'

全屏遮罩中显示的提示文本

fileName 必填

• 类型：string

下载/导出后的文件名

fileNameDate

• 类型：boolean
• 默认：true

在文件名中是否追加日期信息，一来可以显式体现文件的下载日期（YYYY-MM-DD 格式），另外可有效防止在频繁下载/导出文件时，在同一文件目录下多个同名的文件而导致的整理归档上的困难

fileSuffix

• 类型：string
• 默认：'xlsx'

文件后缀，默认为 xlsx EXCEL 文档格式

disabled

• 类型：boolean
• 默认：false

下载/导出按钮的可用状态

before

• 类型：function

按钮执行下载功能前的回调，若函数返回假值，则中断后续行为。该函数支持返回类型是一个 boolean 或 Promise

before 应用示例

<template>
  <v-download :before="check" />
</template>

<script>
export default {
  methods: {
    check () {
      // 返回方式1：同步返回一个 boolean 值
      if (username === 'zhangsan') {
        return true
      } else {
        return false
      }
      // 返回方式2：返回一个 Promise 对象
      return new Promise((resolve, reject) => {
        if (username === 'zhangsan') {
          resolve()
        } else {
          reject()
        }
      })
    }
  }
}
</script>

http

• 类型：function

数据请求方式的函数，通常在全局注册时进行配置，也可在具体的业务场景中，对请求内容进行自定义以覆盖全局设定

函数需返回一个 Promise 对象

实例

<template>
  <div>
    <v-download
      class="btn btn-primary"
      :url="url"
      file-name="月度业绩报表"
      file-suffix="csv"
      :params="params"
    />
  </div>
</template>

<script>
import { get } from '@/config/settings/http'

export default {
  data () {
    return {
      url: '',
      params: {
        ...业务参数
      }
    }
  },
  beforeMounted () {
    // 通过接口获得目标下载文件的下载链接，例如返回的数据为
    // {
    //   url: 'https://some-url/file.xls'
    // }
    get('/v1/some-businesss/data-export', { ...请求参数 }).then(resp => {
      this.url = resp.url
    })
  }
}
</script>