# How to Export PDF and Watermark-Free HTML in NoteRich Sharing your knowledge shouldn't mean compromising on quality or privacy. Whether you are preparing a technical report, archiving a personal journal, or sharing a project update with clients, the final presentation matters. **NoteRich** provides a professional-grade export engine that ensures your notes look exactly as intended—crisp, clean, and perfectly formatted—whether viewed in a browser or printed as a PDF. This guide explores how to leverage NoteRich’s advanced export features to generate high-fidelity HTML and print-ready PDFs, complete with options for watermark-free outputs for Pro users. --- ## 🚀 Why Choose NoteRich for Exports? Unlike standard "Save as HTML" functions that often break layouts or lose styling, NoteRich’s export engine is built for precision: * **Pixel-Perfect Rendering**: Complex elements like Mermaid diagrams, ECharts, and mathematical formulas are rasterized into high-resolution images, ensuring they render correctly on any device. * **Self-Contained Files**: All resources, including local attachments and audio/video files, are embedded directly into the HTML using Base64 encoding. No broken links, no missing assets. * **Smart CSS Extraction**: The system intelligently extracts only the necessary styles, resolving CSS variables and ensuring consistent typography and colors. * **Privacy-First**: All processing happens locally in your browser. Your data never leaves your device during the export process. --- ## 📄 Exporting to High-Fidelity HTML NoteRich allows you to export your current note as a standalone HTML file. This is ideal for web publishing, email newsletters, or long-term archival. ### Step-by-Step Guide 1. Open the note you wish to export. 2. Click the **More Actions** menu (usually represented by `...` or a gear icon) in the top-right corner of the editor. 3. Select **Export as HTML**. 4. The system will automatically process the document: * **SVG Rasterization**: Vector graphics (like flowcharts and graphs) are converted to high-DPI PNGs to ensure compatibility with all email clients and browsers. * **Resource Embedding**: Local files are converted to Base64 strings. 5. Download the `.html` file to your device. > **Pro Tip:** The exported HTML is fully responsive. You can open it on mobile devices, and the layout will adapt seamlessly. --- ## 🖨️ Printing to PDF For formal documents, contracts, or physical archives, PDF is the gold standard. NoteRich integrates a specialized print engine that optimizes your note for paper. ### How to Print to PDF 1. Press `Ctrl + P` (Windows/Linux) or `Cmd + P` (macOS), or select **Print** from the More Actions menu. 2. In the print preview window: * **Destination**: Select "Save as PDF". * **Layout**: Choose Portrait or Landscape based on your content. * **Margins**: Select "None" or "Minimum" for a cleaner look. 3. Click **Save**. ### Print-Specific Optimizations * **Page Break Control**: NoteRich automatically avoids cutting images or code blocks in half across pages. * **Background Graphics**: The engine forces the printing of background colors and images, ensuring that highlights, code block themes, and diagram backgrounds appear exactly as they do on screen. * **Clean Headers/Footers**: By default, browser-generated headers and footers are minimized to keep the focus on your content. --- ## 💎 Watermark-Free Exports for Pro Users NoteRich offers a generous free tier, but for professionals who need brand-consistent documents, the **Pro License** unlocks premium export features. ### The Difference * **Free Tier**: Exports may include a subtle NoteRich logo watermark in the corner of complex visualizations (like charts and diagrams) to support the development of the platform. * **Pro Tier**: Enjoy completely **watermark-free** exports. Your documents will look entirely bespoke, with no third-party branding, making them perfect for client deliverables, academic papers, or corporate reports. ### How to Upgrade 1. Go to **Settings** > **License Management**. 2. Click on **Upgrade to Pro**. 3. Once verified, all future HTML and PDF exports will be generated without watermarks. --- ## 🛠️ Under the Hood: Technical Excellence NoteRich’s export engine handles several complex challenges to ensure reliability: ### 1. SVG to PNG Rasterization Complex SVGs (Scalable Vector Graphics) often rely on CSS variables like `currentColor` which can break when moved to a different context. NoteRich’s engine: * Calculates the exact rendered dimensions of every SVG. * Injects specific color fixes to resolve inheritance issues. * Converts them to high-resolution PNGs within a hidden iframe, ensuring the final image is crisp and self-contained. ### 2. Blob Resource Handling If you’ve embedded local videos, audio, or large images, they typically exist as temporary `blob:` URLs. During export: * The engine detects these resources. * Converts them to Base64 strings in chunks to prevent memory overload. * Embeds them directly into the HTML, so your media plays back even when offline. ### 3. Intelligent CSS Scoping Instead of dumping the entire application’s stylesheet into your export, NoteRich uses a "used-style" extraction algorithm. It scans your note, identifies exactly which CSS rules are applied, and generates a lightweight, optimized `<style>` block. This results in smaller file sizes and faster loading times. --- ## 💡 Best Practices for Exporting * **Check Your Diagrams**: Before exporting, ensure all Mermaid or ECharts diagrams have finished rendering. The export tool captures the current state of the DOM. * **Use Page Breaks**: For long documents, insert manual page breaks (`/page-break`) to control where sections end in the PDF. * **Test on Different Devices**: Open your exported HTML on a phone and a desktop to verify responsiveness. --- ## ❓ Troubleshooting * **Missing Images?** Ensure all local attachments were successfully uploaded before exporting. If an image is still uploading, the export might capture a placeholder. * **Large File Size?** If your note contains many high-resolution images or videos, the Base64-encoded HTML file will be large. Consider using the PDF export for a more compressed format. * **Formatting Issues in PDF?** Try adjusting the scale in the print dialog (e.g., 90% or 110%) to fit content better on the page. --- ## 🏁 Conclusion With NoteRich, your notes are not just stored; they are ready to be shared with the world. Whether you need a quick HTML snapshot for a colleague or a polished, watermark-free PDF for a client, NoteRich’s export engine delivers professional results with zero hassle. Upgrade to Pro today to unlock the full potential of your documentation workflow. --- <div class="flex flex-wrap gap-2 mt-8 mb-12"> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Export</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">PDF</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">HTML</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Pro Features</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Privacy</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Local-First</span> </div>