一、文件下载
1.接口返回文件流
const download0 = (data: Blob, fileName: string, mineType: string) => {// 创建 blobconst blob = new Blob([data], { type: mineType })// 创建 href 超链接，点击进行下载window.URL = window.URL || window.webkitURLconst href = URL.createObjectURL(blob)const downA = document.createElement('a')downA.href = hrefdownA.download = fileNamedownA.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-ignoreif (window.navigator?.msSaveOrOpenBlob) {// @ts-ignorenavigator?.msSaveBlob(blob, fileName)} else {const a = document.createElement('a')const blob = xhr.responseconst blobUrl = createObjectURL(blob)a.href = blobUrla.download = fileNamedocument.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-ignoreconst _this = thisreturn new Promise((resolve) => {const table = _this.$refs[scrollTable]// 拿到表格中承载数据的div元素const divData = table.$refs.bodyWrapperdivData.scrollTop = 0if(_this.timerList[i]) window.clearInterval(_this.timerList[i])// 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每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 / 2resolve(true)}}, 100) // 滚动速度})
}
//调用
await autoScroll.call(this, 'tableRef', 0)
三、柱状图数据较多时，横坐标自动滚动
function dataZoomFun(i: number, chartData: any, time = 3000) {// @ts-ignoreconst _this = thislet 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)}
}
)
