用vue写一个导出Excel的前端按钮
时间: 2023-12-02 07:03:43 浏览: 31
好的,以下是一个使用Vue.js实现的前端导出Excel按钮:
```vue
<template>
<div>
<button @click="exportExcel">导出Excel</button>
</div>
</template>
<script>
export default {
methods: {
exportExcel() {
const data = [
['姓名', '年龄', '性别'],
['张三', '22', '男'],
['李四', '25', '女'],
['王五', '30', '男']
].map(row => row.join('\t')).join('\n')
const blob = new Blob(['\ufeff' + data], { type: 'text/csv;charset=utf-8;' })
const downloadElement = document.createElement('a')
const href = window.URL.createObjectURL(blob)
downloadElement.href = href
downloadElement.download = 'data.xls'
document.body.appendChild(downloadElement)
downloadElement.click()
document.body.removeChild(downloadElement)
window.URL.revokeObjectURL(href)
}
}
}
</script>
```
这个按钮会在点击时触发exportExcel方法,该方法会将数据转换为Blob对象,然后创建一个下载链接,并模拟点击该链接进行下载。这里使用的是CSV格式,如果需要导出其他格式的文件,可以修改type和文件扩展名。