数据导入导出Cordova与OpenHarmony混合开发实战-程序员充电站

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

📌 概述

数据导入导出模块允许用户将Bug数据导出为JSON或CSV格式，以及从文件中导入Bug数据。在Cordova与OpenHarmony混合开发框架下，这个模块提供了完整的数据导入导出功能，用户可以轻松备份和恢复数据。数据导入导出功能的设计目标是为用户提供灵活的数据管理方式，确保数据的安全性和可移植性。

数据导入导出模块采用了原生文件系统访问的方式，通过Cordova插件与OpenHarmony原生代码进行交互，实现高效的文件操作。

🔗 完整流程

第一步：数据导出

当用户点击导出按钮时，系统首先从IndexedDB数据库中收集所有Bug数据。系统会将数据转换为JSON格式，然后通过Cordova插件调用原生代码，将数据写入到文件系统中。

导出过程包括数据收集、格式转换、文件写入等步骤。系统会显示一个进度提示，告诉用户导出的进度。

第二步：文件保存

原生代码会将JSON数据写入到应用的缓存目录或用户选择的目录。系统会返回文件路径给Web层，Web层会显示导出成功的提示和文件路径。

第三步：数据导入

当用户点击导入按钮时，系统会打开一个文件选择器，让用户选择要导入的JSON或CSV文件。用户选择文件后，系统会读取文件内容，解析数据，然后将数据导入到IndexedDB数据库中。

导入过程包括文件读取、数据解析、验证、导入等步骤。系统会显示一个导入确认对话框，让用户确认导入操作。

🔧 Web代码实现

HTML结构

<divid="import-export-page"class="page"><divclass="page-header"><h1class="page-title">数据导入导出</h1></div><divclass="page-content"><!-- 导出部分 --><divclass="section"><h2>导出数据</h2><p>将所有Bug数据导出为JSON文件，用于备份或转移。</p><divclass="form-group"><labelfor="export-format"class="form-label">导出格式</label><selectid="export-format"class="form-select"><optionvalue="json">JSON格式</option><optionvalue="csv">CSV格式</option></select></div><divclass="form-actions"><buttonclass="btn btn-primary"onclick="importExportModule.exportData()">导出数据</button><divid="export-status"class="status-message"></div></div></div><!-- 导入部分 --><divclass="section"><h2>导入数据</h2><p>从JSON或CSV文件中导入Bug数据。导入前请确保文件格式正确。</p><divclass="form-group"><labelfor="import-file"class="form-label">选择文件</label><inputtype="file"id="import-file"class="form-input"accept=".json,.csv"/></div><divclass="form-actions"><buttonclass="btn btn-primary"onclick="importExportModule.importData()">导入数据</button><divid="import-status"class="status-message"></div></div></div><!-- 导出历史 --><divclass="section"><h2>导出历史</h2><divid="export-history"class="history-list"><!-- 动态生成的导出历史 --></div></div></div></div><!-- 导入确认对话框 --><divid="import-confirm-modal"class="modal"style="display:none;"><divclass="modal-content"><divclass="modal-header"><h2>确认导入</h2><buttonclass="modal-close"onclick="importExportModule.closeConfirmModal()">×</button></div><divclass="modal-body"><p>即将导入<spanid="import-count">0</span>条Bug记录。</p><p>导入后，现有数据将被合并。是否继续？</p></div><divclass="modal-footer"><buttonclass="btn btn-default"onclick="importExportModule.closeConfirmModal()">取消</button><buttonclass="btn btn-primary"onclick="importExportModule.confirmImport()">确认导入</button></div></div></div>

HTML结构包含了导出、导入和导出历史三个部分，以及导入确认对话框。

JavaScript逻辑

// 导入导出模块classImportExportModule{constructor(){this.pendingImportData=null;this.exportHistory=[];this.init();}asyncinit(){awaitthis.loadExportHistory();}asyncexportData(){try{// 显示加载提示utils.showLoading('正在导出数据...');// 从数据库获取所有Bugconstbugs=awaitdb.getAllBugs();constcategories=awaitdb.getAllCategories();// 构建导出数据constexportData={version:'1.0',exportDate:newDate().toISOString(),bugs:bugs,categories:categories};// 获取导出格式constformat=document.getElementById('export-format').value;// 转换数据格式letfileContent;letfileName;if(format==='json'){fileContent=JSON.stringify(exportData,null,2);fileName=`bugs_export_${Date.now()}.json`;}else{fileContent=this.convertToCSV(bugs);fileName=`bugs_export_${Date.now()}.csv`;}// 调用原生代码保存文件awaitthis.saveFile(fileName,fileContent);// 隐藏加载提示utils.hideLoading();// 显示成功提示utils.showSuccess('数据导出成功');// 记录导出历史awaitthis.recordExportHistory(fileName,bugs.length);// 刷新导出历史awaitthis.loadExportHistory();}catch(error){console.error('导出数据失败:',error);utils.hideLoading();utils.showError('导出数据失败: '+error.message);}}convertToCSV(bugs){// CSV头constheaders=['ID','标题','描述','优先级','状态','分类','创建日期'];constrows=[headers.join(',')];// CSV行bugs.forEach(bug=>{constrow=[bug.id,`"${bug.title.replace(/"/g,'""')}"`,`"${(bug.description||'').replace(/"/g,'""')}"`,bug.priority,bug.status,bug.categoryId||'',bug.createdDate];rows.push(row.join(','));});returnrows.join('\n');}asyncsaveFile(fileName,fileContent){returnnewPromise((resolve,reject)=>{if(window.cordova){cordova.exec((filePath)=>{console.log('文件已保存:',filePath);resolve(filePath);},(error)=>{console.error('保存文件失败:',error);reject(error);},'FileManagerPlugin','saveFile',[fileName,fileContent]);}else{// 浏览器环境下使用Blobconstblob=newBlob([fileContent],{type:'text/plain'});consturl=URL.createObjectURL(blob);consta=document.createElement('a');a.href=url;a.download=fileName;a.click();URL.revokeObjectURL(url);resolve(fileName);}});}asyncimportData(){constfileInput=document.getElementById('import-file');constfile=fileInput.files[0];if(!file){utils.showError('请选择要导入的文件');return;}try{// 读取文件constfileContent=awaitthis.readFile(file);// 解析数据letimportData;if(file.name.endsWith('.json')){importData=JSON.parse(fileContent);}elseif(file.name.endsWith('.csv')){importData=this.parseCSV(fileContent);}else{utils.showError('不支持的文件格式');return;}// 验证数据if(!importData.bugs||!Array.isArray(importData.bugs)){utils.showError('文件格式不正确');return;}// 保存待导入数据this.pendingImportData=importData;// 显示确认对话框document.getElementById('import-count').textContent=importData.bugs.length;document.getElementById('import-confirm-modal').style.display='flex';}catch(error){console.error('导入数据失败:',error);utils.showError('导入数据失败: '+error.message);}}readFile(file){returnnewPromise((resolve,reject)=>{constreader=newFileReader();reader.onload=(e)=>resolve(e.target.result);reader.onerror=(e)=>reject(e);reader.readAsText(file);});}parseCSV(content){constlines=content.split('\n');constheaders=lines[0].split(',');constbugs=[];for(leti=1;i<lines.length;i++){if(!lines[i].trim())continue;constvalues=lines[i].split(',');constbug={id:parseInt(values[0]),title:values[1].replace(/^"|"$/g,''),description:values[2].replace(/^"|"$/g,''),priority:values[3],status:values[4],categoryId:values[5]?parseInt(values[5]):null,createdDate:values[6]};bugs.push(bug);}return{bugs};}closeConfirmModal(){document.getElementById('import-confirm-modal').style.display='none';this.pendingImportData=null;}asyncconfirmImport(){try{utils.showLoading('正在导入数据...');// 导入Bug数据for(letbugofthis.pendingImportData.bugs){awaitdb.addBug(bug);}// 导入分类数据（如果有）if(this.pendingImportData.categories){for(letcategoryofthis.pendingImportData.categories){awaitdb.addCategory(category);}}utils.hideLoading();utils.showSuccess('数据导入成功');this.closeConfirmModal();// 清空文件输入document.getElementById('import-file').value='';}catch(error){console.error('导入数据失败:',error);utils.hideLoading();utils.showError('导入数据失败: '+error.message);}}asyncrecordExportHistory(fileName,bugCount){constrecord={fileName:fileName,bugCount:bugCount,exportDate:newDate().toISOString()};// 保存到本地存储lethistory=JSON.parse(localStorage.getItem('export_history')||'[]');history.unshift(record);history=history.slice(0,10);// 只保留最近10条localStorage.setItem('export_history',JSON.stringify(history));}asyncloadExportHistory(){consthistory=JSON.parse(localStorage.getItem('export_history')||'[]');consthtml=history.map(record=>`<div class="history-item"> <div class="history-info"> <span class="history-name">${record.fileName}</span> <span class="history-count">${record.bugCount}条记录</span> </div> <div class="history-date">${utils.formatDate(record.exportDate)}</div> </div>`).join('');document.getElementById('export-history').innerHTML=html||'<p>暂无导出历史</p>';}}// 初始化导入导出模块constimportExportModule=newImportExportModule();

JavaScript代码实现了完整的导入导出功能，包括数据导出、格式转换、文件保存、数据导入、格式解析等。

CSS样式

/* 部分样式 */.section{padding:20px;background:white;border-radius:4px;margin-bottom:20px;box-shadow:0 2px 8pxrgba(0,0,0,0.1);}.section h2{margin-top:0;margin-bottom:10px;font-size:16px;}.section p{color:#666;font-size:12px;margin-bottom:15px;}/* 导出历史 */.history-list{display:flex;flex-direction:column;gap:10px;}.history-item{display:flex;justify-content:space-between;align-items:center;padding:12px;background:#f5f7fa;border-radius:4px;}.history-info{display:flex;align-items:center;gap:15px;}.history-name{font-weight:500;color:#333;}.history-count{color:#999;font-size:12px;}.history-date{color:#999;font-size:12px;}/* 状态消息 */.status-message{margin-top:10px;padding:10px;border-radius:4px;font-size:12px;display:none;}.status-message.show{display:block;}.status-message.success{background:#f0f9ff;color:#67c23a;border:1px solid #67c23a;}.status-message.error{background:#fef0f0;color:#f56c6c;border:1px solid #f56c6c;}

🔌 OpenHarmony原生代码

// entry/src/main/ets/plugins/FileManagerPlugin.etsimport{hilog}from'@kit.PerformanceAnalysisKit';import{fileIo}from'@kit.CoreFileKit';import{common}from'@kit.AbilityKit';constTAG:string='[FileManagerPlugin]';constDOMAIN:number=0xFF00;exportclassFileManagerPlugin{staticasyncsaveFile(success:Function,error:Function,args:any[]):Promise<void>{try{constcontext=getContext(this)ascommon.UIAbilityContext;constfileName=args[0];constfileContent=args[1];// 获取缓存目录constcacheDir=context.cacheDir;constfilePath=cacheDir+'/'+fileName;// 写入文件constfile=fileIo.openSync(filePath,fileIo.OpenMode.CREATE|fileIo.OpenMode.WRITE);fileIo.writeSync(file.fd,fileContent);fileIo.closeSync(file.fd);hilog.info(DOMAIN,TAG,`文件已保存:${filePath}`);success(filePath);}catch(err){hilog.error(DOMAIN,TAG,`保存文件失败:${err}`);error('保存文件失败');}}staticasyncreadFile(success:Function,error:Function,args:any[]):Promise<void>{try{constfilePath=args[0];// 读取文件constfile=fileIo.openSync(filePath,fileIo.OpenMode.READ);conststat=fileIo.statSync(filePath);constbuf=newArrayBuffer(stat.size);fileIo.readSync(file.fd,buf);fileIo.closeSync(file.fd);constcontent=String.fromCharCode.apply(null,newUint8Array(buf));hilog.info(DOMAIN,TAG,`文件已读取:${filePath}`);success(content);}catch(err){hilog.error(DOMAIN,TAG,`读取文件失败:${err}`);error('读取文件失败');}}}

Web-Native通信

// 文件管理通信类classFileManagerBridge{staticsaveFile(fileName,fileContent){returnnewPromise((resolve,reject)=>{if(window.cordova){cordova.exec((filePath)=>{console.log('文件已保存:',filePath);resolve(filePath);},(error)=>{console.error('保存文件失败:',error);reject(error);},'FileManagerPlugin','saveFile',[fileName,fileContent]);}else{reject('Cordova未加载');}});}staticreadFile(filePath){returnnewPromise((resolve,reject)=>{if(window.cordova){cordova.exec((content)=>{console.log('文件已读取');resolve(content);},(error)=>{console.error('读取文件失败:',error);reject(error);},'FileManagerPlugin','readFile',[filePath]);}else{reject('Cordova未加载');}});}}