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获取富文本中的第一张图片(正则表达式)

    获取富文本中的第一张图片是前端开发中常用的一个功能,下面是关于如何使用正则表达式来实现该功能的攻略: 步骤一:获取富文本中的图片列表 首先,我们需要使用正则表达式来匹配富文本中所有的图片标签。例如,我们可以使用如下的正则表达式来匹配所有的img标签: const reg = /<img.*?(?:>|\/>)/gi; const imgLi…

    JavaScript 2023年6月10日
    00
  • JS函数验证总结(方便js客户端输入验证)

    JS函数验证是用JavaScript编写的表单客户端输入验证,目的是方便用户输入验证,减少对服务器沟通请求,缩短请求响应时间和提高用户体验。下面是JS函数验证的完整攻略: 1.概述 JS函数验证是对用户的输入数据预先验证,验证的方式可以使用JS正则表达式、API等方式,可以在用户提交表单到服务器之前,即在本地网页浏览器中对数据进行验证。这样可以减少不必要的请…

    JavaScript 2023年6月11日
    00
  • 5分钟快速搭建vue3+ts+vite+pinia项目

    以下是详细讲解“5分钟快速搭建vue3+ts+vite+pinia项目”的完整攻略。 1. 创建项目 首先,我们需要先安装 Node.js 和 npm 包管理器,然后通过 npm 在命令行中执行以下命令来创建一个新的 Vue 3 TypeScript 项目: npm init vite@latest my-project –template vue-ts …

    JavaScript 2023年6月11日
    00
  • 使用Node.js为其他程序编写扩展的基本方法

    使用 Node.js 为其他程序编写扩展的基本方法需要按照以下步骤进行: 步骤一:安装 Node.js 和 NPM 首先需要在本地计算机中安装 Node.js 和 NPM(NPM 是 Node.js 的软件包管理器)。通常可以在 Node.js 的官方网站上下载相应的安装包进行安装。 步骤二:编写扩展代码 为其他程序编写扩展的方法有多种,其中最常用的方法是使…

    JavaScript 2023年5月19日
    00
  • js逆向解密之网络爬虫

    下面我将详细讲解关于“js逆向解密之网络爬虫”的完整攻略。这篇攻略包含以下主要内容: 网络爬虫概述 网络爬虫中的JS逆向解密 示例:对bilibili网站使用JS逆向解密进行网络爬虫 网络爬虫概述 网络爬虫是一种利用程序自动抓取网络信息的技术。网络爬虫可以自动访问网络上的网站,获取其中的数据,并将其存储在本地的数据库中供后续分析使用。在网络爬虫的基础上,我们…

    JavaScript 2023年5月28日
    00
  • 利用javascript查看html源文件

    想要在网页中查看HTML源文件,可以使用JavaScript来实现。具体的实现方法如下: 使用document.documentElement.outerHTML属性,将整个HTML源代码保存在该属性中,并将其打印到控制台上。 console.log(document.documentElement.outerHTML); 使用该方法能够查看整个HTML文档…

    JavaScript 2023年5月27日
    00
  • javascript 小型动画组件与实现代码

    下面是关于“JavaScript 小型动画组件与实现代码”的完整攻略: 理解动画组件 动画是 Web 开发中不可或缺的一个环节,有助于提高用户体验。我们可以使用 JavaScript 实现各种动画效果,但如果每次需要重新编写代码来实现动画,那就会显得十分冗长和麻烦。因此,将一些通用的动画效果进行封装,形成一个可重复使用的动画组件,就成为了一种很好的解决方案。…

    JavaScript 2023年5月28日
    00
  • js 优化次数过多的循环 考虑到性能问题

    对于“js 优化次数过多的循环 考虑到性能问题”的完整攻略,以下是一些常用的优化方法和示例说明: 1. 尽量减少循环内部的操作 在循环中尽量减少操作,包括数据类型转换、数组访问和函数调用等,因为这些操作都需要消耗额外的资源,增加程序的运行成本。如果需要在循环内部进行这类操作,可以将其放到外面的变量里面计算,从而减少循环内部的操作,进而提高程序的性能。 例如,…

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