vue vue3 导出

api.exteriorExport(JSON.parse(lineArr)).then((res)=>{
        const blob = new Blob([res.data.result], { type: 'text/csv;charset=GBK;' })
        const url = URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = url
        const name = res.headers['content-disposition'].slice(res.headers['content-disposition'].indexOf("=")+1)
        link.download = name
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        URL.revokeObjectURL(url)
    })

这段代码执行了一个流程，主要用于下载数据并将其保存为文件。下面是这段代码的逐步解释：

api.exteriorExport 是一个函数调用，它是一个API方法，用于调用后台接口获取数据。

JSON.parse(lineArr) 将 lineArr（JSON字符串）解析为JavaScript对象或数组。

这个函数调用的结果是一个Promise，因此使用 .then() 方法来处理其响应。

.then((res) => {...});

当 api.exteriorExport 的调用完成并返回结果时，.then() 里的回调函数会被执行。

res 是这个回调函数的参数，它包含了API的响应数据。

const blob = new Blob([res.data.result], { type: 'text/csv;charset=GBK;' });

使用响应数据 res.data.result 创建一个新的Blob对象。Blob对象用于表示一段不可变的原始数据。

这个Blob对象被设置为CSV格式，并使用GBK字符集。根据需求进行修改。

const url = URL.createObjectURL(blob);

使用Blob对象创建一个临时的URL，这个URL可以用来表示这个Blob对象。

const link = document.createElement('a');

创建一个新的<a>元素（即链接元素）。

link.href = url;

将新创建的链接元素的href属性设置为之前创建的Blob的URL。

const name = res.headers['content-disposition'].slice(res.headers['content-disposition'].indexOf("=")+1);

从响应头 res.headers['content-disposition'] 中提取文件名。

这通常用于确定下载文件的默认名称。根据需求进行修改。

link.download = name;

设置链接元素的download属性为提取的文件名，这样当用户点击这个链接时，浏览器会下载数据并保存为具有这个名称的文件。

document.body.appendChild(link);

将新创建的链接元素添加到文档的body中。

link.click();

模拟用户点击这个链接，从而触发下载操作。

document.body.removeChild(link);

下载完成后，从文档的body中移除这个链接元素。

URL.revokeObjectURL(url);

释放之前创建的Blob URL，以避免内存泄漏。

总的来说，这段代码的主要目的是从API获取数据，将其转换为CSV格式，并触发浏览器的下载操作，以便用户可以保存这些数据为CSV文件。