uniapp如何导出excel?

2,415 阅读1分钟

掘金上没怎么翻到有uniapp导出excel的文章,可能是低级了吧,嘻嘻,那我还是小小记录一下吧

平常我们在web端导出excel是这样的:

function exportToExcel() {
  // 构建Excel数据,这里假设您已经准备好了Excel数据,以二维数组的形式表示
  const data = [
    ['姓名', '年龄', '性别'],
    ['张三', 25, '男'],
    ['李四', 30, '女'],
  ];
  // 创建一个Workbook对象
  const workbook = XLSX.utils.book_new();
  // 创建一个Worksheet对象,并将数据填充到Worksheet中
  const worksheet = XLSX.utils.aoa_to_sheet(data);
  // 将Worksheet添加到Workbook中
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
  // 将Workbook转换为Excel文件的二进制数据
  const excelData = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
  // 创建Blob对象
  const blob = new Blob([excelData], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  // 创建下载链接
  const downloadUrl = URL.createObjectURL(blob);
  // 创建一个<a>标签并设置相关属性
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.download = 'exported_file.xlsx'; // 设置下载文件的文件名
  // 模拟点击下载链接进行下载
  link.click();
  // 释放URL对象
  URL.revokeObjectURL(downloadUrl);
}

而uniapp上不对外提供document api,接下来按照uniapp提供的api写一个导出excel

<template>
  <view>
    <button @click="download">download</button>
    <button @click="getSavedFile">获取已保存文件</button>
  </view>
</template>

<script>
export default {
  methods: {
    getSavedFile() {
      //获取已经保存的文件
      uni.getSavedFileList({
        success: function (res) {
          console.log(res.fileList)
          //获取已保存文件的详细信息
          res.fileList.forEach(v => {
            uni.getSavedFileInfo({
              filePath: v.filePath, // 仅做示例用,非真正的文件路径
              success: function (res) {
                console.log(res.size)
                console.log(res.createTime)
              }
            })
          })
        }
      })
    },
    download() {
      uni.downloadFile({
        url: "http://192.168.0.100:3001/export-files",
        success: res => {
          if (res.statusCode === 200) {
          // saveFile将临时文件保存到本地
            uni.saveFile({
              tempFilePath: res.tempFilePath,
              success: saveRes => {
                // 在这里可以处理保存成功后的逻辑,例如展示保存成功的提示或打开保存的文件等
                uni.showToast({
                  title: `文件保存成功:${saveRes.savedFilePath}`,
                  icon: "success"
                })
              },
              fail: saveErr => {
                uni.showToast({
                  title: "文件保存失败",
                  icon: "none"
                })
              }
            })
          }
        },
        fail: err => {
          console.log("下载失败", err)
        }
      })
    }
  }
}
</script>

写好了前端,我需要测试导出是不是好使的,那怎么办?那自己写一个node服务

const { Sequelize, DataTypes } = require('sequelize');
const express = require('express');
const cors = require('cors');
const XLSX = require('xlsx');

const app = express();

// 添加 CORS 中间件
app.use(cors());
const sequelize = new Sequelize('pachong2', 'root', '123456', {
  dialect: 'mysql', // 根据你的数据库类型进行相应的配置
  host: '127.0.0.1',
});

const File = sequelize.define('File', {
  name: {
    type: DataTypes.STRING,
    allowNull: false,
  },
  // ... 其他文件属性
});

app.get('/export-files', async (req, res) => {
  try {
    const files = await File.findAll();
    // 构建 Excel 数据
    const workbook = XLSX.utils.book_new();
    const worksheet = XLSX.utils.json_to_sheet(files.map(file => file.toJSON()));
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
    // 将 Excel 数据转换为二进制数据
    const excelData = XLSX.write(workbook, { bookType: 'xlsx', type: 'buffer' });
    // 设置响应头,告诉前端接收的是 Excel 文件
	  // 设置响应头,告诉前端接收的是 Excel 文件,并指定文件名
    const fileName = 'exported_files.xlsx';
    res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
    res.setHeader('Content-Disposition', `attachment; filename="${fileName}"`);
    // 禁用缓存
    res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
    res.setHeader('Pragma', 'no-cache');
    res.setHeader('Expires', '0');
    // 发送生成的 Excel 文件给前端
    res.send(excelData);
  } catch (error) {
    console.error('Export files failed:', error);
    res.status(500).json({ error: 'Export files failed' });
  }
});

const PORT = 3001;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

ok,点击之后好使啦