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

yizhihongxing

下面我将为你详细讲解“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方法”的完整攻略。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue下载excel的实现代码后台用post方法 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • JS获取字符对应的ASCII码实例

    首先我们来说明一下什么是ASCII码。ASCII码是一种常见的字符编码方案,使用7位二进制数来表示128个字符(包括字母、数字、符号等)。 接下来,我们将介绍如何使用JavaScript获取字符对应的ASCII码。 1. 使用charCodeAt()方法 charCodeAt()方法返回指定位置字符的Unicode编码,我们可以使用charCodeAt()方…

    JavaScript 2023年5月28日
    00
  • Vue封装一个Tabbar组件 带组件路由跳转方式

    下面就来详细讲解如何用Vue封装一个Tabbar组件并带有组件路由的跳转方式。 一、准备工作 在开始编写代码之前,需要先安装Vue以及Vue Router等组件。具体步骤如下: 安装Vue.js npm install vue -S 安装Vue Router npm install vue-router -S 二、编写Tabbar组件 下面我们开始编写Tab…

    JavaScript 2023年6月11日
    00
  • js设置document.domain实现跨域的注意点分析

    关于“js设置document.domain实现跨域的注意点分析”的攻略,我将详细介绍如下: 什么是跨域? 在 Web 开发中,跨域是指在一个域下的文档或脚本试图去请求另一个域下的资源。简单来说,当浏览器向一个网站的服务器发送请求时,如果该请求要访问另外一个域名下的资源(比如 JavaScript 文件、CSS 文件等),那么就会发生跨域问题。 为什么需要跨…

    JavaScript 2023年6月10日
    00
  • JavaScript第一个分水岭之数组的基本操作

    JavaScript中的数组是一种非常常用的数据结构,可以用于存储和操作一组数据。学会数组的基本操作是学习JavaScript的第一个重要分水岭。下面是一份完整的攻略,包括数组的基本操作和示例说明。 创建数组 可以使用以下两种方式来创建一个数组: 直接创建 可以使用方括号来直接创建一个数组,数组中的元素使用逗号分隔。 var arr = [1, 2, 3, …

    JavaScript 2023年5月27日
    00
  • JS兼容浏览器的导出Excel(CSV)文件的方法

    作为一个网站的作者,要实现JS兼容浏览器的导出Excel(CSV)文件功能,可以采用以下步骤: 1. 准备数据 首先,需要准备好要导出的数据,以数组的形式存储。并根据具体需要从数据中提取出需要导出的字段,组成表头。 const data = [ { name: ‘张三’, age: 18, gender: ‘男’, address: ‘北京市’ }, { n…

    JavaScript 2023年5月27日
    00
  • 利用canvas实现的加载动画效果实例代码

    下面将为您详细讲解“利用canvas实现的加载动画效果实例代码”的完整攻略。 1. 创建canvas元素 首先,在HTML页面中创建canvas元素,并且为其设置宽高和样式,如下所示: <canvas id="myCanvas" width="200" height="200" style=&…

    JavaScript 2023年6月11日
    00
  • js时间转换毫秒的实例代码

    JS时间转换毫秒是一个常用的功能,在前端开发中经常需要对时间进行计算,因此,掌握JS时间转换毫秒的方法是必要的。 1. Date对象的getTime()方法 在JS中,Date对象提供了一个叫做getTime()的方法,可以将日期对象转换成自1970年1月1日 00:00:00 UTC(协调世界时)以来的毫秒数。示例代码如下: var date = new …

    JavaScript 2023年5月27日
    00
  • 一篇文章让你搞清楚JavaScript事件循环

    一篇文章让你搞清楚JavaScript事件循环 什么是事件循环? JavaScript是一门单线程语言,它有一个主线程执行环境(即全局上下文环境),主线程会按照代码的顺序依次执行。然而,由于JavaScript需要处理UI操作、网络请求、定时器等事件,而这些事件需要等待的时间可能非常长,如果按照阻塞式的方式等待,就会影响用户体验。因此,JavaScript采…

    JavaScript 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部