如何从Next.js应用将图文结构化笔记导出至Apple Notes？

我正在开发一款Next.js应用，支持用户在图片上添加笔记，需要实现将这类图文配对的结构化笔记直接导出至Apple Notes的功能。目前尝试了几种方案但效果都不理想，希望能获得更优解决方案或改进建议：

已尝试的方案及问题 #

• 复制粘贴：将图文信息复制到剪贴板，由用户手动粘贴到Apple Notes。问题是用户体验差，需要手动操作。
• URL Scheme（仅支持文本）：
  • iPhone：mobilenotes://add?title=My%20Note%20Title&content=This%20is%20the%20body%20of%20the%20note%20on%20iOS
  • Mac：notes://add?title=My%20Mac%20Note%20Title&content=This%20is%20the%20body%20of%20the%20note%20on%20macOS
    问题是仅支持导出文本，无法包含图片。
• Share API：允许用户选择Apple Notes作为保存目标，效果尚可但有局限。问题是Share API仅支持单一标题、单一文本块加图片的结构，无法实现图文交替的块结构。

可行解决方案建议 #

1. 优化剪贴板API，写入HTML格式内容

Apple Notes支持粘贴HTML格式内容，能保留图文交替结构，可以优化复制粘贴的体验：

• 把你的结构化图文内容转换成兼容Apple Notes的HTML（用<img>嵌入图片、<p>/<div>组织文本块，保持原有的图文顺序）。
• 使用浏览器Clipboard API直接将HTML内容写入剪贴板，而非纯文本或简单富文本。
• Next.js客户端组件示例代码：

async function copyStructuredNote() {
  // 替换成你的实际图文结构化内容
  const htmlContent = `
    <h2>旅行笔记</h2>
    <p>这是第一天拍摄的日落：</p>
    <img src="data:image/jpeg;base64,${yourImageBase64Data}" alt="日落照片">
    <p>当时的天空颜色特别好看，记录一下参数：ISO 100，快门1/200s</p>
    <p>第二天的日出：</p>
    <img src="data:image/jpeg;base64,${anotherImageBase64Data}" alt="日出照片">
    <p>比日落更有层次感，可惜没带三脚架</p>
  `;
  
  const blob = new Blob([htmlContent], { type: 'text/html' });
  const clipboardItem = new ClipboardItem({ 'text/html': blob });
  
  await navigator.clipboard.write([clipboardItem]);
  alert("内容已复制，打开Apple Notes粘贴即可保留完整图文结构");
}

用户复制后粘贴到Apple Notes，能完整还原图文交替的排版，比纯文本复制体验提升明显。

2. 借助Apple快捷指令实现自动化导出

针对iOS/iPadOS/macOS用户，这是体验接近原生的方案：

• 引导用户创建自定义快捷指令：指令接收JSON格式的结构化数据（包含标题、图片Base64、文本块序列），内部解析后依次插入标题、文本、图片，最后保存到Apple Notes。
• 在Next.js应用中，通过Share API将结构化JSON数据发送到该快捷指令，或生成包含数据的专属链接供用户触发快捷指令。
• 优势：用户只需一次点击即可完成导出，完全支持图文交替的复杂结构。

3. 导出为Apple Notes兼容的文件格式

Apple Notes支持导入HTML、RTF或PDF文件，可以生成这些格式供用户导入：

• HTML：按第一种方案的结构生成HTML文件，用户下载后可直接在Apple Notes中打开或导入。
• PDF：用html2pdf.js等工具将图文结构转换成PDF，用户导入PDF到Apple Notes即可保留完整排版。

内容的提问来源于stack exchange，提问作者felix