vue3下载csv文件

<template>
  <button @click="downClick">下载 CSV 文件</button>
</template>

<script>
import { ref } from 'vue'
export default {
    setup() {
        const downloadUrl = ref(''); 
        const downClick = () => {
        apiUrl({ 接口参数 }).then(res => {
            const blob = new Blob([res], { type: 'text/csv;charset=utf-8;' })
            const url = URL.createObjectURL(blob)
            downloadUrl.value = url
            const link = document.createElement('a')
            link.href = url
            link.download = 'name.csv'
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
            URL.revokeObjectURL(url)
        }).catch(error => {
            console.error(error)
        })
        return{
            downloadUrl,
            downClick,
        }
    }
}
</script>

接口返回的是一个 CSV 文件,可以使用 JavaScript 代码来处理该文件，并将其保存为本地文件。

使用Blob对象创建一个二进制文件对象，然后将其转换为一个可下载的 URL。接下来，创建一个新的链接标签，将 URL 绑定到该标签上，并将download属性设置为name.csv，这样当用户点击链接时，浏览器会自动下载名为file.csv的文件。 最后，将链接标签添加到文档的 body 元素中，并调用click()方法来触发下载操作。下载完成后，移除链接标签并撤销 URL 对象。