关键词

vue下载excel的实现代码后台用post方法

下面我将为你详细讲解“vue下载excel的实现代码后台用post方法”的完整攻略。

  1. 后台代码的实现

首先,后台需要在接口中返回文件流的形式,以便前端能够接收到需要下载的excel文件。具体代码如下:

// 后台 Node.js代码示例
const XLSX = require('xlsx');
const fs = require('fs');
const path = require('path');

const workbook = XLSX.readFile('./test.xlsx');
const bufferData = XLSX.write(workbook,{type: 'buffer', bookType: 'xlsx'});
let fileName = 'testExcel.xlsx';

// 设置响应头信息
res.setHeader('Content-Type','application/octet-stream');
res.setHeader("Content-Disposition", "attachment;filename=" + encodeURI(fileName));
res.setHeader('Content-Length', bufferData.length);

// 直接返回文件流
res.end(bufferData);

上述代码中,我们使用了XLSX库创建了一个名为test.xlsx的excel文件,并将其转换为buffer类型。之后,为了响应下载请求,我们需要设置响应头信息,具体内容如下:

  • Content-Type:设置返回类型为application/octet-stream,表示二进制流
  • Content-Disposition:设置下载文件的文件名(url编码)
  • Content-Length:设置返回文件的长度

最后,我们直接使用res.end()方法将文件流返回给前端即可。

  1. 前端代码的实现

在前端代码实现中,我们需要使用axios库发起POST请求,并在请求成功后获取到返回的文件流,以便能够相应下载。具体代码如下:

// 前端 Vue.js代码示例
import axios from 'axios';
import XLSX from 'xlsx';

// 前端请求POST下载Excel文件的方法
export const downloadExcel = params => {
  return axios({
    method: 'POST',
    url: '/downloadExcel',
    responseType: 'arraybuffer',
    headers: {
      'Content-Type': 'application/json;charset=utf-8',
      'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    },
    data: params // 发送请求参数
   })
   .then(response => {
      // 导出 Excel 文件
      var blob = new Blob([response.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'})
      var fileName = 'testExcel.xlsx'
      var link = document.createElement('a')
      link.href = window.URL.createObjectURL(blob)
      link.download = fileName
      link.click()
   })
}

上述代码中,我们使用axios库发起POST请求,并设置了响应类型为arraybuffer,这样可以正确地获取到后台返回的Excel文件。同时,我们设置了请求头中的Content-TypeAccept,分别表示请求参数的类型和响应参数的类型。在请求成功后,我们使用Blob类型创建了一个二进制对象,并使用创建的URL地址触发下载。

以上即为“vue下载excel的实现代码后台用post方法”的完整攻略。

本文链接:http://task.lmcjl.com/news/10234.html

展开阅读全文