vue.js前端实现excel表格导出和获取headers里的信息

最新推荐文章于 2026-01-18 22:54:37 发布

原创最新推荐文章于 2026-01-18 22:54:37 发布 · 749 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#excel #vue.js

vue基础专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在Vue.js项目中如何实现Excel表格的导出功能，并解决在不同环境中遇到的.split(’;’)错误问题。通过在后端服务器设置，允许前端获取到response.headers中的'content-disposition'，从而正确解析文件名。

1.HTML部分

<el-button
 :loading="loading"
 size="mini"
 class="filter-item"
 type="warning"
 icon="el-icon-download"
 @click="downloadMethodExcel"
>excel模板下载
</el-button>

2.methods中的方法

/*
**excel导出
*/
downloadMethodExcel() {
	this.url = 'api/dataReporting/download'
    this.params = {
      resourcecode: this.code
    }
    this.loading = true
    download(this.url, this.params).then(res => {
      this.loading = false
    }).catch(() => {
      this.loading = false
    })
  }

3.js文件封装excel导出方法

//引入依赖
import axios from 'axios'
import fileDownload from 'js-file-download'
// 下载文件，接受后端传递的文件名称、文件类型
export async function download(url, params) {
  const res = await axios({
    baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASE_API : '/',
    timeout: 2 * 60 * 60 * 1000,
    headers: { 'Authorization': getToken() },
    url: url,
    method: 'get',
    params: params,
    responseType: 'blob'
  })
  const disposition = res.headers['content-disposition']
  const temp = disposition.split(';')[1].split('filename=')[1]
  // 强制转码
  const iconv = require('iconv-lite')
  iconv.skipDecodeWarning = true// 忽略警告
  const filename = iconv.decode(temp, 'UTF-8')
  const fileType = res.headers['content-type']
  const resBlob = res.data
  let resData = null
  try {
    const resText = await new Promise((resolve, reject) => {
      // 通过 FileReader 接受并解析
      const reader = new FileReader()
      reader.addEventListener('abort', reject)
      reader.addEventListener('error', reject)
      reader.addEventListener('loadend', () => {
        resolve(reader.result)
      })
      // 文件
      reader.readAsText(resBlob)
    })
    resData = JSON.parse(resText)
  } catch (err) {
  }
  if (resData) {
    if (resData.error) { } else { }
  } else {
    fileDownload(resBlob, filename)
  }
}

期间遇到的问题：在本地测试时，导出功能可用；发版至正式环境，报错。提示.split(’;’)错误。

原因 / 解决方法：response返回了包含响应头所带的所有数据，可以使用console.log(response）查看打印数据，但是打印出来的数据只能拿到默认的响应头：

 1. Cache-Control
 2. Content-Language
 3. Content-Type
 4. Expires
 5. Last-Modified
 6. Pragma

如果想让浏览器能访问到其他响应头的话，需要后端在服务器上设置Access-Control-Expose-Headers

Access-Control-Expose-Headers : 'content-disposition'

后端大致写法：

headers.add("Access-Control-Expose-Headers", "Content-Disposition");

这样response.headers[‘content-disposition’].split(’;’)[1].split(’=’)[1] 就能取到接口返回的文件名称了。

备注：
控制台截图

需要截图标红2处同时在控制台显示，才能证明可以获取到headers里的信息。