vue项目开发中，实现EXCEL的导出和图片的批量压缩下载。

Shaw_Fan

于 2022-09-15 14:38:31 发布

阅读量1k

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_47700309/article/details/126870403

版权

本文介绍了在Vue项目中如何实现Excel文件的导出以及图片的批量压缩下载。首先，通过js-table2execl库完成Excel导出功能；接着，利用jszip和file-saver库，解决跨域问题，实现从阿里云OSS存储的图片资源的压缩打包下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.导出excel功能

在这里插入图片描述

首先 npm 安装 js-table2execl

npm install js-table2execl

在页面中引入,(也可以全局引入）

import table2excel from 'js-table2excel';

在代码中使用

<el-col :span="1.5">
   <el-button type="success" plain icon="el-icon-upload2" size="mini" :disabled="multiple" @click="handleExport">导出文件</el-button>
</el-col>

handleExport() {
   
            var tableData = this.useractivitymessageList;
            var dataList = [];
            tableData.forEach(item => {
   
                const spliceLength = item.facePicture.lastIndexOf("/");
                item.imageName = item.facePicture.slice(spliceLength + 1);
                dataList.push({
   
                    userName: item.userName,
                    userId: item.userId,
                    phoneNumber: item.phoneNumber,
                    idCardno: item.idCardno,
                    imageName: item.imageName,
                    company: item.company,
                    facePicture: ite

最低0.47元/天解锁文章