本文介绍如何在 cordova 混合应用中，将 html2pdf 生成的 pdf 以 blob 形式安全导出，并在 ios 设备上通过系统默认浏览器（safari）打开，解决 cordova 中 pdf 无法直接保存或预览的问题。
本文介绍如何在 cordova 混合应用中，将 html2pdf 生成的 pdf 以 blob 形式安全导出，并在 ios 设备上通过系统默认浏览器（safari）打开，解决 cordova 中 pdf 无法直接保存或预览的问题。
在 Cordova 构建的混合应用中，使用 html2pdf.js 生成 PDF 后调用 .save() 方法，往往仅触发浏览器下载行为——但在 iOS 的 WebView 中（尤其是 WKWebView），该行为被禁用或受限，导致 PDF 仅以空白页或不可操作形式打开，用户无法保存或分享。根本原因在于：Cordova 的 WebView 不支持原生文件系统写入，且 html2pdf().save() 依赖 或 Blob URL 下载机制，在 iOS 上默认失效。
要实现在 iOS 上“用 Safari 打开 PDF”，核心思路是：不依赖自动下载，而是将 PDF 转为 Blob URL，并通过 cordova-plugin-inappbrowser 在 _system 模式下唤起系统浏览器（即 Safari）进行渲染与操作。注意：_blank 模式默认使用 InAppBrowser（非 Safari），必须显式指定 _system 才能跳转至 Safari。
✅ 正确实现方式如下（已适配 Cordova + html2pdf + iOS）：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
function generatePDF(data) {
// ...（原有表单数据收集逻辑保持不变）...
html2pdf()
.from(document.body)
.set({
filename: `${sanitizedCustomerName}_${sanitizedOrderNumber}.pdf`,
image: { type: 'jpeg', quality: 0.98 },
jsPDF: { unit: 'mm', format: 'a3', orientation: 'landscape' }
})
.toPdf()
.get('pdf')
.then((pdf) => {
// 关键步骤：从 jsPDF 实例提取原始字节流并构造 Blob
const byteArray = new Uint8Array(pdf.internal.stream.bytes);
const blob = new Blob([byteArray], { type: 'application/pdf' });
const fileURL = URL.createObjectURL(blob);
// ✅ 使用 _system 目标在 Safari 中打开（iOS 必需）
// 注意：需确保已安装 cordova-plugin-inappbrowser
cordova.InAppBrowser.open(fileURL, '_system', 'location=yes');
// 清理内存（重要！避免内存泄漏）
setTimeout(() => URL.revokeObjectURL(fileURL), 5000);
})
.catch((err) => {
console.error('PDF generation failed:', err);
alert('PDF 生成失败，请检查网络或重试');
})
.finally(() => {
// 恢复 UI 元素显示
['addButton', 'saveButton', 'clearButton', 'commentButton',
'removeWindowButton', 'removeCommentButton']
.forEach(id => {
const el = document.getElementById(id);
if (el) el.style.display = 'inline-block';
});
});
}
? 关键注意事项：
-
插件依赖：确保已正确安装并配置以下插件：
cordova plugin add cordova-plugin-inappbrowser # 注意：无需 cordova-pdf-generator（本方案基于前端生成，非原生 PDF 渲染）
-
iOS 配置：在 config.xml 中添加白名单权限（iOS 10+ 必需）：
<allow-navigation href="*"></allow-navigation><allow-intent href="itms:*"></allow-intent><allow-intent href="itms-apps:*"></allow-intent><access origin="*"></access>
- 安全性提示：_system 模式会离开当前应用上下文，返回需依赖用户手动操作（如点击「完成」）。若需留在 App 内预览，可改用 cordova-plugin-file-opener2 配合临时文件写入（但需额外权限及存储处理）。
- 内存管理：每次 URL.createObjectURL() 后务必调用 URL.revokeObjectURL()，否则可能引发内存泄漏，尤其在频繁生成 PDF 场景下。
综上，该方案绕过 Cordova WebView 的下载限制，利用系统浏览器能力实现 PDF 安全预览、保存与分享，兼顾兼容性与用户体验，是 Cordova iOS 端 PDF 导出的标准实践路径。
