Skip to content
This repository was archived by the owner on Oct 30, 2025. It is now read-only.

Plugin: Export XLSX

Jump to bottom
Dushusir edited this page May 17, 2023 · 35 revisions

EN 【中文文档在下方】

Introduction

Luckysheet is exported to an XLSX file, the front end passes in the luckysheet json, and the back end returns the XLSX file stream.

Online experience address: Luckysheet Export Demo

Function

The following Luckysheet configurations already support exporting to xlsx files

Cell

sheet.data[row][column]

  • v: the original value of the content
  • bg: background
  • ff: font
  • fc: font color
  • bl: bold font
  • it: font italic
  • fs: font size
  • cl: enable strikethrough
  • ht: center horizontally
  • vt: vertical center
  • tr: text rotation
  • tb: Text word wrapping
  • ct: number format (beta)
  • f: formula (beta)
  • ps: comments
  • rich text

worksheet properties

  • sheet.defaultRowHeight: default row height
  • sheet.defaultColWidth: default column width
  • sheet.hyperlink: hyperlink

worksheet configuration

  • sheet.config.borderInfo: border
  • sheet.config.merge: merge cells
  • sheet.config.rowlen: row height
  • sheet.config.columnlen: column width
  • sheet.config.rowhidden: hide rows
  • sheet.config.colhidden: Hidden columns

workbook configuration

  • scaling ratio
  • Maximum line number
  • Maximum column number
  • Activate now
  • sheet name
  • Activate selection
  • Horizontal scroll bar position
  • Vertical scroll bar position

use

1. Download executable file

Download the executable lucky-export-linux for deployment to a linux server

Address: [to be released]

2. Upload to server

Use an FTP tool such as FileZilla to transfer the lucky-export-linux file to any empty directory on the server, such as the /software/lucky directory

Fix Permission denied issue

cd /software/lucky
chmod 777 lucky-export-linux

3. Start the service

linux

cd /software/lucky
# Run the test directly in the current window, you can change the port as needed
./lucky-export-linux -p 3001
# Keep running in the background
nohup ./lucky-export-linux -p 3001 >lucky-export-linux.out 2>&1 &

After execution, Ctrl+C can exit the interaction

Check whether the startup is successful

ps aux | grep lucky-export-linux

Printing out information like this means that the startup is successful

4. Front-end configuration

Option One

The front end of Luckysheet already supports the export button on the toolbar through configuration

luckysheet. create({
     plugins:[{
         name: 'exportXlsx',
         config:{
             url:'http://[YOUR_SERVER_IP]:3001/luckyToXlsx'
         }
     }]
})

Among them, you need to update your own server interface address url

Option Two

custom export button

<button id="export-xlsx">Export XLSX</button>

Listen and request the interface to export XLSX files

const exportBtn = document. getElementById('export-xlsx');
exportBtn.addEventListener('click', fetchAndDownloadXlsx);

function downloadXlsx(data, filename) {
     const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
     const url = URL.createObjectURL(blob);
     const link = document. createElement('a');
     link.href = url;
     link.download = filename;
     link. click();
     URL.revokeObjectURL(url);
}

function fetchAndDownloadXlsx(url,success,fail) {
     // Pay attention to initialize luckysheet in advance
     const luckyJson = luckysheet.toJson();

     fetch('http://localhost:3001/luckyToXlsx', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json'
         },
         body: JSON.stringify(luckyJson)
     })
         .then((response) => response.blob())
         .then((blob) => {
             const filename = luckyJson.title + '.xlsx';
             downloadXlsx(blob, filename);
         })
         .catch((error) => {
             console.error('fetch error:', error);
         });
}

ZH

介绍

Luckysheet导出到XLSX文件，前端传入luckysheet json，后端返回XLSX文件流。

在线体验地址：Luckysheet 导出 Demo

功能

以下Luckysheet的配置已支持导出到xlsx文件

单元格

sheet.data[row][column]

  • v: 内容的原始值
  • bg: 背景
  • ff: 字体
  • fc: 字体颜色
  • bl: 字体加粗
  • it: 字体斜体
  • fs: 字体大小
  • cl: 启用删除线
  • ht: 水平居中
  • vt: 垂直居中
  • tr: 文字旋转
  • tb: 文本自动换行
  • ct: 数字格式(beta)
  • f: 公式(beta)
  • ps: 批注
  • 富文本

worksheet属性

  • sheet.defaultRowHeight：默认行高
  • sheet.defaultColWidth：默认列宽
  • sheet.hyperlink：超链接

worksheet配置

  • sheet.config.borderInfo：边框
  • sheet.config.merge：合并单元格
  • sheet.config.rowlen：行高
  • sheet.config.columnlen：列宽
  • sheet.config.rowhidden：隐藏行
  • sheet.config.colhidden：隐藏列

workbook配置

  • 缩放比例
  • 最大行号
  • 最大列号
  • 是否激活
  • sheet 名称
  • 激活选区
  • 横向滚动条位置
  • 竖向滚动条位置

使用

1. 下载可执行文件

下载用于部署到linux服务器上的可执行文件 lucky-export-linux

地址：[待发布]

2. 上传到服务器

使用 FTP 工具比如 FileZilla，传输 lucky-export-linux 文件到服务器任意空白目录，比如/software/lucky目录下

修复 Permission denied 问题

cd /software/lucky
chmod 777 lucky-export-linux

3. 启动服务

linux

cd /software/lucky
# 当前窗口直接运行测试，可以根据需要更改端口
./lucky-export-linux -p 3001
# 保持后台运行
nohup ./lucky-export-linux -p 3001 >lucky-export-linux.out 2>&1 &

执行后 Ctrl+C 退出交互即可

查询是否启动成功

ps aux|grep lucky-export-linux

打印出类似这样的信息就是启动成功

4. 前端配置

方案一

Luckysheet前端已经支持通过配置开启工具栏的导出按钮

luckysheet.create({
    plugins:[{
        name:'exportXlsx',
        config:{
            url:'http://[YOUR_SERVER_IP]:3001/luckyToXlsx'
        }
    }]
})

其中需要更新自己服务器接口地址url

方案二

自定义导出按钮

<button id="export-xlsx">Export XLSX</button>

监听并请求接口导出XLSX文件

const exportBtn = document.getElementById('export-xlsx');
exportBtn.addEventListener('click', fetchAndDownloadXlsx);

function downloadXlsx(data, filename) {
    const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = filename;
    link.click();
    URL.revokeObjectURL(url);
}

function fetchAndDownloadXlsx(url,success,fail) {
    // 注意提前初始化luckysheet
    const luckyJson = luckysheet.toJson();

    fetch('http://localhost:3001/luckyToXlsx', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(luckyJson)
    })
        .then((response) => response.blob())
        .then((blob) => {
            const filename = luckyJson.title + '.xlsx';
            downloadXlsx(blob, filename);
        })
        .catch((error) => {
            console.error('fetch error:', error);
        });
}

Clone this wiki locally