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

下面我将为你详细讲解“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-Type和Accept，分别表示请求参数的类型和响应参数的类型。在请求成功后，我们使用Blob类型创建了一个二进制对象，并使用创建的URL地址触发下载。

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