一些公共方法。utils存放

一、文件下载
1.接口返回文件流

const download0 = (data: Blob, fileName: string, mineType: string) => {
  // 创建 blob
  const blob = new Blob([data], { type: mineType })
  // 创建 href 超链接,点击进行下载
  window.URL = window.URL || window.webkitURL
  const href = URL.createObjectURL(blob)
  const downA = document.createElement('a')
  downA.href = href
  downA.download = fileName
  downA.click()
  // 销毁超连接
  window.URL.revokeObjectURL(href)
}

2.返回http url地址

// 下载文件
const download1 = (url: string, fileName: string) => {
  const xhr = new XMLHttpRequest()
  xhr.open('get', url) //url地址,
  xhr.setRequestHeader('token', getAccessToken())
  xhr.responseType = 'blob'
  xhr.onload = function () {
    const blob = xhr.response
    // const nameStr = xhr.getResponseHeader('Content-Disposition').split(';')[1].trim();
    // fileName = decodeURIComponent(nameStr.split('=')[1]);
    // @ts-ignore
    if (window.navigator?.msSaveOrOpenBlob) {
      // @ts-ignore
      navigator?.msSaveBlob(blob, fileName)
    } else {
      const a = document.createElement('a')
      const blob = xhr.response
      const blobUrl = createObjectURL(blob)
      a.href = blobUrl
      a.download = fileName
      document.body.appendChild(a)
      a.click()
      window.URL.revokeObjectURL(blobUrl)
    }
  }
  xhr.send()
}
function createObjectURL(object) {
  return window.URL ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object)
}

const download = {
  // 下载 有完整地址
  downloadFunc: download1,
  // 下载 PDF 方法
  pdf: (data: Blob, fileName: string) => {
    download0(data, fileName, 'application/pdf')
  },
  // 下载 Excel 方法
  excel: (data: Blob, fileName: string) => {
    download0(data, fileName, 'application/vnd.ms-excel')
  },
  // 下载 Word 方法
  word: (data: Blob, fileName: string) => {
    download0(data, fileName, 'application/msword')
  },
}
export default download

二、el-table 自动滚动

========================表格自动播放========================================
// @ts-ignore设置自动滚动 scrollTable为ref
function autoScroll(scrollTable, i) {
    // @ts-ignore
    const _this = this
    return new Promise((resolve) => {
    	if(_this.timerList[i]) window.clearInterval(_this.timerList[i])
        if (!_this.$refs) return
        const table = _this.$refs[scrollTable]
        // 拿到表格中承载数据的div元素
        const divData = table.$refs.bodyWrapper
        divData.scrollTop = 0
        // 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每100毫秒移动1像素)
        _this.timerList[i] = window.setInterval(() => {
            // 元素自增距离顶部1像素
            divData.scrollTop += 1
            // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
            if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
                // 重置table距离顶部距离
                divData.scrollTop = 0
                // 重置table距离顶部距离。值=(滚动到底部时,距离顶部的大小) - 整个高度/2
                // 00divData.scrollTop = divData.scrollTop - divData.scrollHeight / 2
                resolve(true)
            }
        }, 100) // 滚动速度
    })
}
//调用
await autoScroll.call(this, 'tableRef', 0)

三、柱状图数据较多时,横坐标自动滚动

function dataZoomFun(i: number, chartData: any, time = 3000) {
    // @ts-ignore
    const _this = this
    let data = _.cloneDeep(chartData)
    const _loop = () => {
        if (data.dataZoom[0].endValue == data.xAxis.value.length ) {
            data.dataZoom[0].endValue = 6;
            data.dataZoom[0].startValue = 0;
        } else {
            data.dataZoom[0].endValue = data.dataZoom[0].endValue + 1;
            data.dataZoom[0].startValue = data.dataZoom[0].startValue + 1;
        }
        _this.chartList[i].setOption(data,true);
    }
    _loop();
    if(_this.timerList[i]) clearInterval(_this.timerList[i])
    _this.timerList[i] = setInterval(_loop, time);
}
dataZoomFun.call(this, 3, this.options)

注意以上在组件销毁时,定时器需要关闭

beforeDestroy() {
  for (let item of this.timerList) {
        clearInterval(item)
    }
}
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值