Vue实现excel导出,不请求后端

原因是做出来的不符合需求,需要连接后端,又不想删掉,做个记录

1:先创建一个按钮

html 复制代码
 <el-col :span="1.5">
            <el-button
              @click="exportExcel"
              size="mini"
              type="primary"
              icon="el-icon-download"
            >导出Excel</el-button>
</el-col>

2:先查看是XLSX的依赖,没有的话需要安装一下

html 复制代码
npm install xlsx

安装的时候如果报错需要清理缓存,并把依赖包删掉重新安装

node_modules为项目中的依赖包

html 复制代码
npm cache clean --force

//linux
rm -rf node_modules
//windows
Remove-Item -Recurse -Force node_modules

npm install

出现这个问题的话需要,重新编译node-sass

Found bindings for the following environments: - Windows 64-bit with Node.js 10.x This usually happens because your environment has changed since running npm install. Run npm rebuild node-sass to download the binding for your current environment.

html 复制代码
npm rebuild node-sass

3:然后引入

html 复制代码
<script>
import XLSX from 'xlsx';

4:添加导出方法

html 复制代码
method:{
exportExcel() {
      // 导出Excel的方法
      if(this.list.length > 0){
      	//此处的this.list为列表的数据集合
        const data = this.list.map(item => {
          return {
            '列名1': item.数据名称,
            '列名2': item.数据名称,
            '列名3': item.数据名称,
            '列名4': item.数据名称
          };
        });
        const worksheet = XLSX.utils.json_to_sheet(data);
        const columnWidths = [
          { wch: 20 },  // 第一列宽度为20
          { wch: 15 },  // 第二列宽度为15
          { wch: 10 },  // 第三列宽度为10
          { wch: 15 }   // 第四列宽度为15
        ];
        worksheet['!cols'] = columnWidths;
        const workbook = {
          Sheets: { 'data': worksheet },
          SheetNames: ['data']
        };
        const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'buffer' });
        const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });
        const filename = '文件名.xlsx';
        if (typeof navigator.msSaveBlob === 'function') {
          navigator.msSaveBlob(blob, filename);
        } else {
          const link = document.createElement('a');
          if (link.download !== undefined) {
            const url = URL.createObjectURL(blob);
            link.setAttribute('href', url);
            link.setAttribute('download', filename);
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
          }
        }
      }else{
        this.$message.error('暂无数据');
      }
    },
   }
相关推荐
Sheldon一蓑烟雨任平生10 小时前
Vue3 列表渲染
vue.js·vue3·v-for·列表渲染·vue3 列表渲染·v-for 循环对象·v-for与计算属性
Luffe船长11 小时前
前端vue2+js+springboot实现excle导入优化
前端·javascript·spring boot
Demoncode_y11 小时前
前端布局入门:flex、grid 及其他常用布局
前端·css·布局·flex·grid
明天最后11 小时前
使用 Service Worker 限制请求并发数
前端·service worker
java水泥工11 小时前
基于Echarts+HTML5可视化数据大屏展示-电信厅店营业效能分析
前端·echarts·html5·大屏展示
鹿鹿鹿鹿isNotDefined12 小时前
Pixelium Design:Vue3 的像素风 UI 组件库
前端·javascript·vue.js
运维行者12 小时前
知乎崩了?立即把网站监控起来!
前端·javascript·后端
ZhengEnCi12 小时前
Excel 文件结构完全指南-从基础概念到 Python 读取的实用宝典
python·excel
stayong12 小时前
市面主流跨端开发框架对比
前端
武昌库里写JAVA12 小时前
C语言 函数指针和指针函数区别 - C语言零基础入门教程
vue.js·spring boot·sql·layui·课程设计