bentopdf/src/pages/odt-to-pdf.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Primary Meta Tags -->
    <meta
      name="title"
      content="ODT to PDF Online Free - ODT to PDF Tool | BentoPDF"
    />
    <meta
      name="description"
      content="Convert OpenDocument Text files to PDF format. Supports multiple files. Free, no uploads, no signup. Runs entirely in your browser."
    />
    <meta name="keywords" content="odt to pdf, online pdf" />
    <meta name="author" content="BentoPDF" />
    <meta
      name="robots"
      content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"
    />

    <!-- Canonical URL -->
    <link rel="canonical" href="https://www.bentopdf.com/odt-to-pdf" />

    <!-- Open Graph / Facebook / LinkedIn -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://www.bentopdf.com/odt-to-pdf" />
    <meta
      property="og:title"
      content="ODT to PDF Online Free - ODT to PDF Tool | BentoPDF"
    />
    <meta
      property="og:description"
      content="Convert OpenDocument Text files to PDF format. Supports multiple files. Free, no uploads, no signup. Runs entirely in your browser."
    />
    <meta
      property="og:image"
      content="https://www.bentopdf.com/images/og-odt-to-pdf.png"
    />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:site_name" content="BentoPDF" />

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:url" content="https://www.bentopdf.com/odt-to-pdf" />
    <meta name="twitter:title" content="ODT to PDF Free" />
    <meta
      name="twitter:description"
      content="Convert OpenDocument Text files to PDF format. Supports multiple files. Free, no uploads, no signup. Runs entirely in your browser."
    />
    <meta
      name="twitter:image"
      content="https://www.bentopdf.com/images/twitter-odt-to-pdf.png"
    />
    <meta name="twitter:site" content="@BentoPDF" />

    <!-- Mobile Web App -->
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-title" content="ODT to PDF" />

    <title>ODT to PDF - Convert OpenDocument Text to PDF - BentoPDF</title>

    <link href="/src/css/styles.css" rel="stylesheet" />

    <!-- Web App Manifest -->
    <link rel="manifest" href="/site.webmanifest" />

    <!-- Favicons -->
    <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
    <link
      rel="icon"
      type="image/png"
      sizes="192x192"
      href="/images/favicon-192x192.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="512x512"
      href="/images/favicon-512x512.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="/images/apple-touch-icon.png"
    />
    <link rel="icon" href="/favicon.ico" sizes="32x32" />
  </head>

  <body class="antialiased bg-gray-900">
    {{> navbar }}

    <div
      id="uploader"
      class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900"
    >
      <div
        id="tool-uploader"
        class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-gray-200 border border-gray-700"
      >
        <button
          id="back-to-tools"
          class="flex items-center gap-2 text-indigo-300 hover:text-indigo-400 mb-6 font-semibold"
        >
          <i data-lucide="arrow-left" class="cursor-pointer"></i>
          <span class="cursor-pointer" data-i18n="tools.backToTools">
            Back to Tools
          </span>
        </button>

        <h1
          class="text-2xl font-bold text-white mb-2"
          data-i18n="tools:odtToPdf.name"
        >
          ODT to PDF
        </h1>
        <p class="text-gray-400 mb-6" data-i18n="tools:odtToPdf.subtitle">
          Convert OpenDocument Text files to PDF format. Supports multiple
          files.
        </p>

        <div
          id="drop-zone"
          class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300"
        >
          <div class="flex flex-col items-center justify-center pt-5 pb-6">
            <i class="ph ph-upload-simple text-4xl mb-3 text-gray-400"></i>
            <p class="mb-2 text-sm text-gray-400">
              <span class="font-semibold" data-i18n="upload.clickToSelect"
                >Click to select files</span
              >
              <span data-i18n="upload.orDragAndDrop">or drag and drop</span>
            </p>
            <p
              class="text-xs text-gray-500"
              data-i18n="upload.hints.oneOrMoreOdt"
            >
              One or more ODT files
            </p>
            <p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">
              Your files never leave your device.
            </p>
          </div>
          <input
            id="file-input"
            type="file"
            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
            accept=".odt,application/vnd.oasis.opendocument.text"
            multiple
          />
        </div>

        <div id="file-controls" class="hidden mt-4 flex gap-3">
          <button
            id="add-more-btn"
            class="btn bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2"
          >
            <i data-lucide="plus"></i>
            <span data-i18n="upload.addMore">Add More Files</span>
          </button>
          <button
            id="clear-files-btn"
            class="btn bg-gray-700 hover:bg-gray-600 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2"
          >
            <i data-lucide="trash-2"></i>
            <span data-i18n="upload.clearAll">Clear All</span>
          </button>
        </div>

        <div id="file-display-area" class="mt-4 space-y-2"></div>

        <div id="convert-options" class="hidden mt-6">
          <button id="process-btn" class="btn-gradient w-full">
            Convert to PDF
          </button>
        </div>
      </div>
    </div>

    <div
      id="loader-modal"
      class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
    >
      <div
        class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl"
      >
        <div class="solid-spinner"></div>
        <p id="loader-text" class="text-white text-lg font-medium">
          Processing...
        </p>
      </div>
    </div>

    <div
      id="alert-modal"
      class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden"
    >
      <div
        class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700"
      >
        <h3
          id="alert-title"
          class="text-xl font-bold text-white mb-2"
          data-i18n="alert.title"
          data-i18n="alert.title"
        >
          Alert
        </h3>
        <p id="alert-message" class="text-gray-300 mb-6"></p>
        <button
          id="alert-ok"
          class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200"
        >
          OK
        </button>
      </div>
    </div>

    <!-- How It Works Section -->
    <section class="max-w-4xl mx-auto px-4 py-12">
      <h2
        class="text-2xl md:text-3xl font-bold text-white mb-8 text-center"
        data-i18n="howItWorks.title"
      >
        How It Works
      </h2>
      <div class="space-y-6">
        <div class="flex items-start gap-4">
          <div
            class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold"
          >
            1
          </div>
          <div class="flex-1">
            <h3 class="text-lg font-semibold text-white mb-1">Upload File</h3>
            <p class="text-gray-400" data-i18n="howItWorks.step1">
              Click or drag and drop your file to begin
            </p>
          </div>
        </div>
        <div class="flex items-start gap-4">
          <div
            class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold"
          >
            2
          </div>
          <div class="flex-1">
            <h3 class="text-lg font-semibold text-white mb-1">Process</h3>
            <p class="text-gray-400" data-i18n="howItWorks.step2">
              Click the process button to start
            </p>
          </div>
        </div>
        <div class="flex items-start gap-4">
          <div
            class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold"
          >
            3
          </div>
          <div class="flex-1">
            <h3 class="text-lg font-semibold text-white mb-1">Download</h3>
            <p class="text-gray-400" data-i18n="howItWorks.step3">
              Save your processed file instantly
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- Related Tools Section -->
    <section class="max-w-6xl mx-auto px-4 py-12">
      <h2
        class="text-2xl md:text-3xl font-bold text-white mb-6 text-center"
        data-i18n="relatedTools.title"
      >
        Related PDF Tools
      </h2>
      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
        <a
          href="merge-pdf.html"
          class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
        >
          <h3 class="text-white font-semibold mb-1">Merge PDF</h3>
          <p class="text-gray-400 text-sm">Free online merge PDF tool</p>
        </a>
        <a
          href="compress-pdf.html"
          class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
        >
          <h3 class="text-white font-semibold mb-1">Compress PDF</h3>
          <p class="text-gray-400 text-sm">Free online compress PDF tool</p>
        </a>
        <a
          href="split-pdf.html"
          class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
        >
          <h3 class="text-white font-semibold mb-1">Split PDF</h3>
          <p class="text-gray-400 text-sm">Free online split PDF tool</p>
        </a>
        <a
          href="edit-pdf.html"
          class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
        >
          <h3 class="text-white font-semibold mb-1">Edit PDF</h3>
          <p class="text-gray-400 text-sm">Free online edit PDF tool</p>
        </a>
        <a
          href="rotate-pdf.html"
          class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
        >
          <h3 class="text-white font-semibold mb-1">Rotate PDF</h3>
          <p class="text-gray-400 text-sm">Free online rotate PDF tool</p>
        </a>
      </div>
    </section>

    <!-- FAQ Section -->
    <section class="max-w-4xl mx-auto px-4 py-12">
      <h2
        class="text-2xl md:text-3xl font-bold text-white mb-6 text-center"
        data-i18n="faq.sectionTitle"
      >
        Frequently Asked Questions
      </h2>
      <div class="faq-list">
        <details class="faq-d">
          <summary class="faq-d-q">
            How do I convert an ODT file to PDF without LibreOffice installed?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            Drop the .odt file on the page and click Convert to PDF. A build of
            LibreOffice compiled to WebAssembly loads inside your browser and
            does the conversion, so you don't need LibreOffice, OpenOffice, or
            Word on the computer.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            Why is converting the first ODT file slower?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            The LibreOffice engine is roughly 75 MB compressed and has to be
            downloaded and started the first time you convert in a session; a
            progress indicator shows the percentage. Once it's loaded, further
            conversions in the same session start right away.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            Will my formatting, tables, and images be preserved?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            The conversion uses LibreOffice's own PDF export, so styles, tables,
            images, and page layout come through the way Writer would print
            them. Documents with embedded OLE objects or fonts that aren't
            available may render slightly differently, so check one sample
            before converting a large batch.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            Can I convert multiple ODT files at once?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            Add as many .odt files as you like, remove any you don't want from
            the list, and convert them in one go. A single file downloads as a
            PDF named after the original; two or more arrive in
            odt-converted.zip with one PDF per file.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            What about .docx, .doc, or .ott files?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            This page accepts only .odt. Word documents go through
            <a href="/word-to-pdf" class="text-indigo-300 hover:text-indigo-400"
              >Word to PDF</a
            >, which uses the same engine, and an .ott template should be opened
            and saved as .odt before converting.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            Will the PDF text be selectable and searchable?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            The PDF is exported from the document's actual text rather than a
            picture of the page, so the text can be selected, copied, and
            searched in any viewer.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            Does it work with ODT files from OpenOffice or other programs?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            Any standard OpenDocument Text file is accepted regardless of which
            program saved it, including LibreOffice Writer, Apache OpenOffice,
            and other word processors that write .odt.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            Is my ODT document uploaded to convert it?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            No. The LibreOffice engine runs entirely inside your browser, so the
            .odt file is read and the PDF is written on your own device. That
            makes it usable for confidential contracts, theses, and anything
            else you'd rather not put on a conversion server.
          </p>
        </details>
      </div>
    </section>
    {{> footer }}
    <script type="module" src="/src/js/utils/lucide-init.ts"></script>
    <script type="module" src="/src/js/utils/full-width.ts"></script>
    <script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
    <script type="module" src="/src/js/logic/odt-to-pdf-page.ts"></script>
    <script type="module" src="/src/js/mobileMenu.ts"></script>
    <script type="module" src="/src/js/main.ts"></script>

    <!-- JSON-LD Structured Data -->
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "SoftwareApplication",
        "name": "ODT to PDF - BentoPDF",
        "applicationCategory": "PDF Tool",
        "operatingSystem": "Any - Web Browser",
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "USD"
        }
      }
    </script>

    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "HowTo",
        "name": "How to odt to pdf online",
        "description": "Learn how to odt to pdf using BentoPDF",
        "step": [
          {
            "@type": "HowToStep",
            "position": 1,
            "name": "Upload File",
            "text": "Click or drag and drop your file"
          },
          {
            "@type": "HowToStep",
            "position": 2,
            "name": "Process",
            "text": "Click the process button"
          },
          {
            "@type": "HowToStep",
            "position": 3,
            "name": "Download",
            "text": "Download your processed file"
          }
        ]
      }
    </script>

    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [
          {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://www.bentopdf.com"
          },
          {
            "@type": "ListItem",
            "position": 2,
            "name": "ODT to PDF",
            "item": "https://www.bentopdf.com/odt-to-pdf"
          }
        ]
      }
    </script>
  </body>
</html>