一、文件下载
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)
}
}