导入导出页面 Cordova&OpenHarmony 混合开发实战
本文介绍了家庭菜谱应用的导入导出模块设计,支持JSON、CSV和PDF三种格式的数据导出。该模块采用分层架构:Web层负责数据获取和基本格式转换,通过JavaScript实现JSON和CSV的生成;ArkTS插件则处理PDF生成和文件存储等原生功能。在鸿蒙设备上,Web层通过调用ArkTS插件实现PDF导出功能,而浏览器环境则直接使用Blob下载文件。这种设计既保证了跨平台一致性,又能充分利用原生
📌 模块概述
导入导出页面主要解决「与其他系统或工具之间的数据交换」问题,相比备份恢复更面向外部:备份恢复关注的是完整数据镜像,而导入导出则关注多种格式(JSON、CSV、PDF 等)的转换,方便在 Excel 中分析、在打印机中打印或与他人共享局部数据。在 Cordova&OpenHarmony 环境下,导出逻辑大部分在 Web 层实现,而 ArkTS 插件则可以辅助处理文件存储位置、PDF 生成或调用原生打印服务。
🔗 导出流程
- 用户在导入导出页面选择导出格式(JSON、CSV、PDF);
- Web 层通过
db.exportData()获取全部菜谱或特定筛选后的子集; - 根据选中的格式调用对应的转换函数,将数据转为 JSON 字符串或 CSV 文本;
- 在浏览器中通过 Blob 下载文件,在鸿蒙设备上则可通过 ArkTS 插件写入文件系统或传给原生打印服务。
🔧 导出按钮结构(HTML 片段)
<div class="card">
<div class="card-content">
<button class="btn btn-primary" onclick="exportRecipes('json')">导出为 JSON</button>
<button class="btn btn-primary" onclick="exportRecipes('csv')">导出为 CSV</button>
</div>
</div>
这一 HTML 片段展示了导出区域的两个按钮,分别对应 JSON 和 CSV。通过 exportRecipes(format) 函数参数控制后续逻辑。
🔧 Web 层导出为 CSV(JavaScript 片段)
async function exportRecipes(format) {
const data = await db.exportData();
const recipes = data.recipes || [];
if (format === 'json') {
const json = JSON.stringify(recipes, null, 2);
// 省略 JSON 下载逻辑
}
if (format === 'csv') {
const header = '名称,分类,菜系,烹饪时间';
const lines = recipes.map(r => `${r.name},${r.category || ''},${r.cuisine || ''},${r.cookingTime || 0}`);
const csv = [header, ...lines].join('\n');
// 省略 CSV 下载逻辑
}
}
这段代码展示了如何从统一的数据导出接口中根据格式生成不同的文本内容。实际下载可以复用前文的 Blob 技巧。由于转换全部在 Web 层进行,迁移到 ArkWeb 中也无需改动。
🔌 使用鸿蒙原生生成 PDF(ArkTS 片段)
// entry/src/main/ets/plugins/ExportPdfPlugin.ets
import plugin from '@ohos.plugin';
@plugin
export default class ExportPdfPlugin {
async exportPdf(json: string): Promise<string> {
// 示例:将 JSON 数据转换为 PDF 并保存到文件系统
const path = '/data/storage/el2/base/backup/recipes.pdf';
console.info('export pdf to ' + path);
return path;
}
}
ArkTS 侧通过 ExportPdfPlugin 接收 JSON 数据,并在原生环境中完成 PDF 生成和存储。返回值是最终 PDF 文件路径,方便 Web 层在 UI 中给出提示。
async function exportRecipesPdfNative() {
const data = await db.exportData();
const json = JSON.stringify(data.recipes || []);
if (!window.cordova) return;
cordova.exec(
(path) => showToast('PDF 已导出到:' + path, 'success'),
(err) => showToast('导出 PDF 失败:' + err, 'error'),
'ExportPdfPlugin',
'exportPdf',
[json]
);
}
在 Web 层,当用户选择导出为 PDF 且处于鸿蒙设备环境时,可以调用上述函数,把菜谱 JSON 交给 ArkTS 插件处理。这样可以在前端保持简单的格式转换逻辑,将复杂的 PDF 生成和文件操作交给原生层。
📝 小结
导入导出页面扩展了家庭菜谱数据与外部世界的交互能力,支持 JSON、CSV、PDF 等多种格式,为统计分析、打印与分享提供了基础。借助 Cordova&OpenHarmony 混合开发,我们在 Web 层完成数据抽取和基本格式转换,通过 ArkTS 插件整合文件系统与高级导出能力,实现了跨环境的一致体验。
欢迎加入开源鸿蒙跨平台社区:https://openharmonycrossplatform.csdn.net
更多推荐

所有评论(0)