VUE 文件流下载.sheet、.xls、.xlsx

问题记录中心✘

已于 2023-03-30 16:16:57 修改

阅读量454

点赞数

文章标签： vue.js javascript 前端

于 2023-03-29 11:20:46 首次发布

本文链接：https://blog.csdn.net/weixin_40394560/article/details/129833167

版权

本文介绍了两种在Vue.js前端应用中实现Excel文件流下载的方法，包括.sheet、.xls、.xlsx格式，帮助开发者处理数据导出需求。

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

第一种方式

npm install --save js-file-download

 <el-button size="mini" @click="exportExcel">下载</el-button>

import fileDownload from 'js-file-download';

exportExcel() {
            var urls = `download`;//下载接口
            this.$confirm('确定导出？', '操作提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                axios({
                    url: urls,
                    method: "post",
                    responseType: "blob",
                    data: {
                         "Id": this.id,
                         "startTime": this.startTime,
                         "endTime": this.endTime
                        
                    },
                }).then((res) => {
                    console.log(res.data)
                    fileDownload("blob字节流", 'fileName')
                    fileDownload(res.data, "文件名称.xlsx");
                    this.$message({message: '下载成功！', type: 'success'});
                })
            }).catch(err => {
                this.$message({type: 'info', message: '已取消'});
            })
        },

第二种方式

import axios from "axios";

axios({
     url: `/docDownload`,
      method: 'post',
      responseType: 'blob',
      dataType: 'json',
      headers: { 'Content-type': 'application/json;' },
      data: params
    }).then((res) => {
      const xlsx = 'application/vnd.ms-excel'
      const blob = new Blob([res.data], { type: xlsx }) // 转换数据类型
      const a = document.createElement('a') // 转换完成，创建一个a标签用于下载
      a.download = '周围文档列表' + new Date().getTime() + '.xlsx'
      a.href = window.URL.createObjectURL(blob)
      a.click()
      a.remove()
})