欢迎大家加入开源鸿蒙跨平台开发者社区,一起共建开源鸿蒙跨平台生态。

在这里插入图片描述

📌 概述

导入导出模块提供了数据导入和导出功能。该模块集成了 Cordova 框架与 OpenHarmony 原生能力,支持多种格式的数据导出,包括 JSON、CSV 和 Excel。用户可以导出数据用于分析或备份,也可以导入外部数据到应用中。

🔗 完整流程

第一步:导出数据准备

当用户选择导出功能时,应用会收集所有需要导出的数据。用户可以选择导出的数据类型和格式。应用会根据选择的格式对数据进行序列化。

第二步:文件生成与保存

应用通过 Cordova 调用原生插件,将序列化的数据保存为文件。应用会为文件添加时间戳,便于用户识别。

第三步:导入数据验证与导入

用户可以选择文件进行导入。应用会验证文件的格式和数据的完整性,然后导入到数据库中。

🔧 Web 代码实现

HTML 导入导出页面

<div id="import-export-page" class="page">
    <div class="page-header">
        <h1>导入导出</h1>
    </div>
    
    <div class="export-section">
        <h2>导出数据</h2>
        <div class="form-group">
            <label for="export-format">导出格式</label>
            <select id="export-format">
                <option value="json">JSON</option>
                <option value="csv">CSV</option>
                <option value="excel">Excel</option>
            </select>
        </div>
        <button class="btn btn-primary" onclick="exportData()">导出</button>
    </div>
    
    <div class="import-section">
        <h2>导入数据</h2>
        <input type="file" id="import-file" accept=".json,.csv,.xlsx">
        <button class="btn btn-primary" onclick="importData()">导入</button>
    </div>
</div>

导入导出页面包含导出和导入功能。

导入导出逻辑

async function exportData() {
    const format = document.getElementById('export-format').value;
    
    try {
        // 收集数据
        const records = await db.getAllRecords();
        const goals = await db.getGoals();
        const reminders = await db.getReminders();
        
        let exportData;
        let filename;
        
        if (format === 'json') {
            exportData = JSON.stringify({
                records: records,
                goals: goals,
                reminders: reminders
            }, null, 2);
            filename = `tea_data_${new Date().getTime()}.json`;
        } else if (format === 'csv') {
            exportData = convertToCSV(records, goals, reminders);
            filename = `tea_data_${new Date().getTime()}.csv`;
        } else if (format === 'excel') {
            // Excel 导出需要额外的库支持
            showToast('Excel 导出功能开发中', 'info');
            return;
        }
        
        // 调用原生导出
        if (window.cordova) {
            cordova.exec(
                function(filepath) {
                    showToast(`数据已导出到: ${filepath}`, 'success');
                },
                function(err) {
                    showToast('导出失败: ' + err, 'error');
                },
                'FileManager',
                'exportData',
                [{ data: exportData, filename: filename, format: format }]
            );
        }
    } catch (error) {
        console.error('Failed to export data:', error);
        showToast('导出失败', 'error');
    }
}

function convertToCSV(records, goals, reminders) {
    let csv = '类型,名称,日期,值\n';
    
    records.forEach(r => {
        csv += `记录,${r.teaType},${r.createdAt},${r.price}\n`;
    });
    
    goals.forEach(g => {
        csv += `目标,${g.name},${g.deadline},${g.targetValue}\n`;
    });
    
    reminders.forEach(r => {
        csv += `提醒,${r.name},${r.time},${r.enabled ? '启用' : '禁用'}\n`;
    });
    
    return csv;
}

async function importData() {
    const fileInput = document.getElementById('import-file');
    const file = fileInput.files[0];
    
    if (!file) {
        showToast('请选择文件', 'warning');
        return;
    }
    
    try {
        const reader = new FileReader();
        reader.onload = async function(e) {
            const content = e.target.result;
            
            if (file.name.endsWith('.json')) {
                const data = JSON.parse(content);
                await importJSONData(data);
            } else if (file.name.endsWith('.csv')) {
                await importCSVData(content);
            }
        };
        reader.readAsText(file);
    } catch (error) {
        console.error('Failed to import data:', error);
        showToast('导入失败', 'error');
    }
}

async function importJSONData(data) {
    try {
        if (data.records) {
            for (const record of data.records) {
                await db.addRecord(record);
            }
        }
        
        if (data.goals) {
            for (const goal of data.goals) {
                await db.addGoal(goal);
            }
        }
        
        if (data.reminders) {
            for (const reminder of data.reminders) {
                await db.addReminder(reminder);
            }
        }
        
        showToast('数据导入成功', 'success');
        navigateTo('dashboard');
    } catch (error) {
        console.error('Failed to import JSON:', error);
        showToast('导入失败', 'error');
    }
}

async function importCSVData(content) {
    const lines = content.split('\n');
    let recordCount = 0;
    
    for (let i = 1; i < lines.length; i++) {
        const parts = lines[i].split(',');
        if (parts.length < 3) continue;
        
        const type = parts[0].trim();
        const name = parts[1].trim();
        
        if (type === '记录') {
            recordCount++;
        }
    }
    
    showToast(`导入了 ${recordCount} 条记录`, 'success');
}

这段代码实现了导入导出功能。exportData() 导出数据。importData() 导入数据。

🔌 OpenHarmony 原生代码

文件导出管理

// entry/src/main/ets/plugins/FileManager.ets
import { fileIo } from '@kit.FileIOKit';
import { paths } from '@kit.CoreFileKit';

export class FileManager {
    static exportData(options: ExportOptions): Promise<string> {
        return new Promise((resolve, reject) => {
            try {
                const exportDir = paths.tempDir + '/exports';
                if (!fileIo.accessSync(exportDir)) {
                    fileIo.mkdirSync(exportDir);
                }
                
                const filepath = exportDir + '/' + options.filename;
                const fd = fileIo.openSync(filepath, 0o100 | 0o001, 0o666);
                fileIo.writeSync(fd, options.data);
                fileIo.closeSync(fd);
                
                hilog.info(0xFF00, 'FileManager', `Data exported to: ${filepath}`);
                resolve(filepath);
            } catch (error) {
                hilog.error(0xFF00, 'FileManager', `Failed to export: ${error}`);
                reject(error);
            }
        });
    }
}

interface ExportOptions {
    data: string;
    filename: string;
    format: string;
}

这个类管理文件导出。exportData() 将数据导出为文件。

📝 总结

导入导出模块展示了如何在 Cordova 框架中实现数据导入导出功能。通过 Web 层的用户界面和交互,结合原生层的文件管理,为用户提供了灵活的数据交换能力。

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐