前端导出blob文件

最新推荐文章于 2025-02-27 15:41:58 发布

AnnieRabbit

最新推荐文章于 2025-02-27 15:41:58 发布

阅读量388

点赞数

分类专栏： Vue 文章标签：前端

本文链接：https://blog.youkuaiyun.com/AnnieRabbit/article/details/127689761

版权

Vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现从Web应用中导出数据到Excel文件的方法。具体步骤包括构造导出请求的数据对象、发送HTTP请求获取二进制数据、利用Blob对象创建临时下载链接并触发点击事件来实现文件下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.接口调用

/** 导出按钮操作 */
handleExport() {
  let obj = {
    name: this.form.sqlName,
    content: this.form.sqlContent,
    // content: encrypt(this.form.sqlContent),
    programId: this.programId,
    userId: this.user.userId,
    userCode: this.user.userCode,
    dataSourceId: this.form.dataSourceId,
    database: this.form.dataBaseName,
  };
  exportData(obj).then((res) => {
    // 该实例化的方式第一个参数必须是数组的格式
    const blob = new Blob([res], {
      type: 'application/vnd.ms-excel',
    });

    const url = window.URL.createObjectURL(blob)
    const a = document.createElement('a');
    a.href = url;
    a.download = '导出文件';
    a.click();
    window.URL.revokeObjectURL(url);
  }).catch((r) => {
    console.error(r)
  })