Vue - 实现文件导出文件保存下载

1 文件导出:使用XLSX插件

需求背景纯前端导出,如 在前端页面勾选部分表格数据,点击"导出"按钮导出Excel文件。
实现思路

  • 1.通过XLSX插件XLSX.utils.book_new()方法,创建excel工作蒲对象wb。
  • 2.结合自定义的字段名key和数据记录data,生成新数组body。
  • 3.按需插入第一行数据,通过数组的unshift()方法。
  • 4.通过XLSXS.utils.book_new(), 创建excel表格对象wb。
  • 5.计算各列col宽。
  • 6.通过XLSX.utils.book_append_sheet(),生成实际excel工作蒲,并使用XLSX.writeFile()生成excel文件。

组件代码

<!--把数据导出到excel-->
<template><span style="padding:0 2px"><el-buttonplainicon="el-icon-download"type="primary"size="mini":disabled="disabled"@click="exportToExcel">{{ $t('export') }}</el-button></span>
</template>
<script>
import XLSX from 'xlsx'
import XLSXS from 'xlsx-js-style'
export default {name: 'ExportExcel',props: {tableName: {type: String,default: () => {return this.$t('exportTable')}},sheetName: { type: String, default: 'sheet1' },tableData: {type: Array,default: () => {return []}},columns: {type: Array,default: () => {return []}},setColorPropList: {// 对值进行颜色设置的列type: Array,default: () => {return []}},disabled: { type: Boolean, default: false }},data() {return {}},methods: {exportToExcel() {const headData = []const props = []const colWidth = []this.columns.forEach((v) => {if (v.visible) {const headObj = {v: v.label,t: 's',s: {alignment: {vertical: 'center', // 垂直居中horizontal: v.align || 'left' // 水平},fill: {fgColor: { rgb: 'CACACF' }}}}headData.push(headObj)props.push(v.prop)colWidth.push({ wch: v.width / 10 || 10 })}})this.exportData(this.tableData, [headData], props, colWidth)},/*** @function exportData 导出excel* @param {Array} tableData json数据* @param {Array} headData 表头数据[["日期", "姓名", "地址"]]* @param {Array} colWidth 列宽*/exportData(tableData, headData, props, colWidth) {const body = []tableData.forEach((item) => {const rowData = []props.forEach((v) => {const value = item[v]const find = this.columns.find((z) => z.prop === v)const valueObj = {v: value,t: 's',s: {alignment: {horizontal: (find && find.align) || 'left'},font: {color: { rgb: '666666' }}}}if (find && this.setColorPropList.includes(find.prop)) {// 颜色判断if (!isNaN(parseFloat(value))) {if (parseFloat(value) > 0) {valueObj.s.font.color = { rgb: 'FF0000' }}if (parseFloat(value) < 0) {valueObj.s.font.color = { rgb: '008000' }}}}if (find && find.render) {// 列中是否有render方法valueObj.v = find.render(item, value)}rowData.push(valueObj)})body.push(rowData)})body.unshift(...headData)const sheet = XLSX.utils.aoa_to_sheet(body)sheet['!cols'] = colWidthconst wb = XLSXS.utils.book_new()XLSXS.utils.book_append_sheet(wb, sheet, this.sheetName) // 工作簿名称XLSXS.writeFile(wb, this.tableName + '.xlsx') // 保存的文件名}}
}
</script>

使用示例

<ExportExceltableName="数量表"sheetName="数量表":columns="overviewColumns":table-data="exportExcelTableData":set-color-prop-list="['code','name']":disabled="false"
/>overviewColumns: [{prop: 'code', label: '代码'}, {prop: 'name', label: '名称'}, {prop: 'amount', label: '数量'}],
exportExcelTableData: [{code: 'XXX', name: 'name1', amount: 10}]

点击“导出”按钮即导出数据保存文件到本地电脑。

2 文件导出:通过 Blob 对二进制流文件下载实现

需求背景需后端配合,如 在前端页面点击"导出"按钮导出当前表格所有数据。
实现思路:封装文件导出组件,组件传入后端接口地址+请求参数。
原理 同4:可以参照另外一篇博客记录 通过 Blob 对二进制流文件下载实现文件保存下载

  • 组件代码
<template><span style="padding:0 2px"><el-buttonplainicon="el-icon-download"type="primary"size="mini":disabled="disabled"@click="downloadFile">{{ $t('export') }}</el-button></span>
</template>
<script>
import { download } from '@/utils/request'
import moment from 'moment'
export default {name: 'FileDownload',props: {queryParams: { type: Object, default: null },downLoadUrl: { type: String, default: null },disabled: { type: Boolean },fileName: { type: String, default: moment().format('yyyyMMDDHHmmss') }},data() {return {// 拼接导出URLdownLoadFileUrl: process.env.VUE_APP_BASE_API + this.downLoadUrl}},methods: {/** 导出事件 */downloadFile() {download(this.downLoadUrl, this.queryParams, `${this.fileName}.csv`, {})}}
}
</script>
  • 使用示例
<FileDownload:query-params="fileDownloadParams"down-load-url="/ida/v1/portfolio/holding_history/everyday/export":file-name="$t('dailyReturnsAndHoldings')"/>

点击“导出”按钮即下载文件保存到本地电脑:
在这里插入图片描述

3 文件保存下载:直接打开链接(通过浏览器解析方式直接下载)

需后端配合:后端返回下载的URL。
如果后台返回的是 get 请求的下载可以直接使用 a 标签下载

<a href='http://下载地址' target="_blank" rel="noopener noreferrer nofollow">下载</a>

点击a标签即下载文件到本地电脑。

4 文件保存下载:通过 Blob 对二进制流文件下载实现

需后端配合:可以看我的另外一篇博客记录 通过 Blob 对二进制流文件下载实现文件保存下载
点击对应位置即下载文件保存到本地电脑。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/584275.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中

目录 默认样式 修改默认字体颜色&#xff1a; 修改鼠标悬浮/选中字体颜色&#xff1a; 去掉长分割线并修改下划线颜色 完整代码 默认样式 注意事项&#xff1a;一定要在 <style scoped>不然修改的样式不会覆盖生效 修改默认字体颜色&#xff1a; ::v-deep .el-tabs__…

[鹏城杯 2022]简单包含

[鹏城杯 2022]简单包含 wp 题目代码如下&#xff1a; <?php highlight_file(__FILE__); include($_POST["flag"]); //flag in /var/www/html/flag.php; 直接 POST 传参&#xff1a; flag/var/www/html/flag.php 会触发 waf 。 尝试用伪协议读取&#xff1a; …

canvas绘制红绿灯路口

无图不欢&#xff0c;先上图 使用方法&#xff08;以vue3为例&#xff09; <template><canvas class"lane" ref"laneCanvas"></canvas> </template><script setup> import { ref, onMounted } from vue import Lane from …

C实现数组奇数在前偶数在后排序

一、运行结果&#xff1b; 二、源码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>//实现调整函数move_odd_even函数&#xff1b; void move_odd_even(int arr[], int sz) {//初始化变量值&#xff1b;int left 0;int right sz - 1;//循环判断和…

CSP CCF 201312-2 ISBN号码 C++满分题解

解题思路&#xff1a; 1.用一个int数组单独存储每个数字&#xff1b;用char数组存储原始标识符串&#xff0c;方便输出 2.计算后得到标识码&#xff0c;判断是否正确 #include<iostream> using namespace std;int main() {int num[15]; //存储每个位置的数char arr[15…

【高性能篇】QPS概念、RT概念

什么是QPS&#xff0c;什么是RT&#xff1f; ✔️典型解析✔️扩展知识仓✔️RT ✔️QPS✔️ QPS和TPS✔️并发用户数✔️最佳线程数 ✔️典型解析 QPS&#xff0c;指的是系统每秒能处理的请求数(Query Per Second)&#xff0c;在Web应用中我们更关注的是Web应用每秒能处理的re…

Radar System Pro - Plug Play Solution

Radar System Pro是一款功能多样且可定制的资源,旨在通过功能齐全且易于使用的雷达系统增强您的Unity项目。无论您是在开发第一人称射击游戏、策略游戏还是太空探索模拟器,我们的雷达系统都将为您提供所需的工具,以创建引人入胜且身临其境的体验。 雷达系统是一个模块化资产…

2023年华为OD机试(python)B卷-符合要求的结对方式

一、题目 题目描述&#xff1a; 用一个数组A代表程序员的工作能力&#xff0c;公司想通过结对编程的方式提高员工的能力&#xff0c;假设结对后的能力为两个员工的能力之和&#xff0c;求一共有多少种结对方式使结对后能力为N。 二、输入输出 输入描述: 5 1 2 2 2 3 4 第一行为…

Unity 贝塞尔曲线工具获取运动轨迹

Unity 贝塞尔曲线工具获取运动轨迹 一、介绍贝塞尔曲线二、Unity中贝塞尔曲线工具介绍1.创建一个空物体挂在上BezierSpline.cs脚本组件2.由上图可知刚创建出来的有两个点和两个手柄组成3.我们可修改其坐标看下效果4.这样我们就可以获得这两个点之间的指定数量的点来作为某个物体…

openGauss学习笔记-177 openGauss 数据库运维-逻辑复制-逻辑解码-逻辑解码概述

文章目录 openGauss学习笔记-177 openGauss 数据库运维-逻辑复制-逻辑解码-逻辑解码概述177.1 功能描述177.2 注意事项177.3 性能 openGauss学习笔记-177 openGauss 数据库运维-逻辑复制-逻辑解码-逻辑解码概述 177.1 功能描述 openGauss对数据复制能力的支持情况为&#xff…

资助26项!基金委公布一批原创探索项目资助结果!

根据《国家自然科学基金原创探索计划项目实施方案&#xff08;试行&#xff09;》要求&#xff0c;现将2023年度数理科学部资助的专项项目&#xff08;指南引导类原创探索计划项目&#xff09;相关信息予以公示&#xff1a; 国家自然科学基金委员会 数理科学部 2023年12月26日…

Linux 内核学习笔记: hlist 的理解

前言 最近阅读 Linux 内核时&#xff0c;遇到了 hlist&#xff0c;这个 hlist 用起来像是普通的链表&#xff0c;但是为何使用 hlist&#xff0c;hlist 是怎么工作的&#xff1f; 相关代码 hlist_add_head(&clk->clks_node, &core->clks); /*** clk_core_link_…

vue3项目使用pako库解压后端返回zip数据

文章目录 前言一、pako 介绍一些特点和功能&#xff1a;简单示例 二、vue3 实战示例1.安装后引入库安装:引用用自定义hooks 抽取共用逻辑部署小插曲 前言 外部接口返回一个图片数据是经过zip压缩的&#xff0c;前端需要把这个数据处理成可以显示的图片。大概思路&#xff1a;z…

68内网安全-域横向PTHPTKPTT哈希票据传递

今天讲PTH&PTK&PTT&#xff0c; PTH(pass the hash) #利用 lm 或 ntlm 的值进行的渗透测试 PTT(pass the ticket) #利用的票据凭证 TGT 进行的渗透测试 用的Kerberos 协议 PTK(pass the key) #利用的 ekeys aes256 进行的渗透测试 lm加密算法是2003以前的老版&…

vitis HLS中实现canny算法的IP核

一、前言 canny边缘检测主要用于提取图像的边缘&#xff0c;是最常用且有效的边缘检测算法。在AMD赛灵思提供的库函数中&#xff0c;使用xf::cv::Canny和xf::cv::EdgeTracing两个函数实现canny边缘提取。本文举例说明如何在vitis HLS 2023.1中实现canny算法。 二、xf::cv::Cann…

JUC常用并发工具类

JUC常用并发工具类 1、什么是JUC? JUC 就是 java.util.concurrent 包&#xff0c;这个包俗称 JUC&#xff0c;里面都是解决并发问题的一些东西&#xff0c;该包的位置位于 java 下 面的 rt.jar 包下面。 2、4大常用并发工具类 2.1 CountDownLatch CountDownLatch&#x…

基于Java车间工时管理系统(源码+部署文档)

博主介绍&#xff1a; ✌至今服务客户已经1000、专注于Java技术领域、项目定制、技术答疑、开发工具、毕业项目实战 ✌ &#x1f345; 文末获取源码联系 &#x1f345; &#x1f447;&#x1f3fb; 精彩专栏 推荐订阅 &#x1f447;&#x1f3fb; 不然下次找不到 Java项目精品实…

《新传奇》期刊投稿论文发表

《新传奇》杂志是经国家新闻出版总署批准、面向国内外公开发行的综合性社科期刊&#xff0c;由湖北省文联主管&#xff0c;湖北今古传奇传媒集团有限公司主办&#xff0c;湖北优秀期刊。本刊旨在坚守初心、引领创新&#xff0c;展示高水平研究成果&#xff0c;支持优秀学术人才…

如何使用 NFTScan NFT API 在 Gnosis 网络上开发 Web3 应用

Gnosis Chain 是一个兼容 EVM 的区块链&#xff0c;专注于快速且低成本的交易功能&#xff0c;采用独特的双通证模型&#xff1b;xDai 是一种用于交易、支付和手续费的稳定币&#xff0c;权益证明&#xff08;PoS&#xff09;保护将由 GNO 通过共识层 Gnosis Beacon Chain 提供…