Export to PDF plugin

This plugin is only available as a paid add-on to a TinyMCE subscription.
This feature is only available for TinyMCE 7.0 and later.

The Export to PDF feature collects the HTML generated with the tinymce.editor.getContent() method and combines it with the default editor content styles along with the styles provided in the plugin configuration. The combined content and styles are then processed by the included server-side converter service, which can be either self-hosted or cloud-based. Following this processing, a PDF file is generated, which is subsequently returned to the user’s browser, enabling them to save it onto their disk or drive.

Interactive example

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="exportpdf">
  <h1>Streamline - The Next-Gen Learning Management System (LMS)</h1>
  <p>This document provides a comprehensive overview of the Streamline Learning Management System (LMS) project.</p>

  <figure class="image">
    <img src="https://images.unsplash.com/photo-1522199755839-a2bacb67c546?q=80&amp;w=2072&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 
          alt="A laptop on a polished wood table with a bronze cup, creating a warm workspace ambiance" width="573" height="429">
    <figcaption>An elegant workspace featuring a laptop on a polished wood table, accompanied by a bronze cup, creating a warm and productive atmosphere.</figcaption>
  </figure>
  
  <p>Photo by <a href="https://unsplash.com/@anete_lusina">Anete Lūsiņa</a> on <a href="https://unsplash.com">Unsplash</a></p>

  <h2>Project Goals</h2>
  <p>Streamline aims to revolutionize online learning by offering a robust and user-friendly platform for educators and learners. The primary goals include:</p>
  <ul>
    <li><strong>Empowering educators</strong> with intuitive tools for content creation, course management, and student assessment.</li>
    <li><strong>Enhancing the learning experience for students</strong> through engaging content delivery, interactive features, and personalized learning paths.</li>
    <li><strong>Increasing accessibility and scalability</strong> to cater to diverse learning needs and support a growing user base.</li>
  </ul>
  
  <h2>System Features</h2>
  <p>Streamline is designed to enrich the learning process through a comprehensive set of features:</p>
  <ul>
    <li><strong>Content Management System (CMS)</strong>: An intuitive interface enabling educators to create and upload various learning materials, including videos, documents, presentations, and quizzes.</li>
    <li><strong>Course Management Tools</strong>: Structure courses with clear objectives, organize content modules, and manage student enrollments effectively.</li>
    <li><strong>Interactive Learning Activities</strong>: Includes gamification, discussion forums, collaborative assignments, and more to maintain student engagement.</li>
    <li><strong>Assessment & Analytics</strong>: Tools for creating quizzes, tracking student progress, generating reports, and identifying improvement areas.</li>
    <li><strong>Personalized Learning Paths</strong>: Machine learning algorithms provide tailored content recommendations based on student progress and needs.</li>
  </ul>
  
  <h3>Table 1: Streamline - Target User Groups</h3>
  <table style="border-collapse: collapse; width: 100%;" border="1">
    <thead>
      <tr>
        <th style="text-align: left;">User Group</th>
        <th style="text-align: left;">Benefits</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><strong>Educators</strong></td>
        <td>Easy content creation, efficient course management, and valuable student insights.</td>
      </tr>
      <tr>
        <td><strong>Learners</strong></td>
        <td>Engaging learning experience, personalized learning paths, and interactive collaboration.</td>
      </tr>
      <tr>
        <td><strong>Administrators</strong></td>
        <td>Scalable platform management, user access control, and comprehensive reporting tools.</td>
      </tr>
    </tbody>
  </table>
  
  <h2>Technology Stack</h2>
  <p>Streamline will leverage a robust technology stack to ensure performance, scalability, and security:</p>
  <ul>
    <li><strong>Front-End</strong>: ReactJS for a responsive and user-friendly interface.</li>
    <li><strong>Back-End</strong>: Node.js for efficient server-side operations.</li>
    <li><strong>Database</strong>: MongoDB for flexible and scalable data storage.</li>
    <li><strong>Cloud Platform</strong>: Amazon Web Services (AWS) for reliable hosting and infrastructure.</li>
  </ul>
  
  <h2>Project Timeline</h2>
  <ul>
    <li><strong>Phase 1 (2 Months)</strong>: System design, core functionalities development, and front-end prototype creation.</li>
    <li><strong>Phase 2 (3 Months)</strong>: Integration of advanced features like personalized learning and assessment tools.</li>
    <li><strong>Phase 3 (1 Month)</strong>: Rigorous testing, bug fixing, and UI refinement.</li>
    <li><strong>Phase 4 (Ongoing)</strong>: Deployment, user feedback collection, and continuous iterative development.</li>
  </ul>
  
  <blockquote>
    <p><em>This timeline is preliminary and may be subject to change.</em></p>
  </blockquote>
  
  <h2>Conclusion</h2>
  <p>Streamline LMS is poised to become a game-changer in online education. By empowering educators and enhancing student experiences, it aims to make effective and accessible learning available to all.</p>
</textarea>
tinymce.init({
  selector: 'textarea#exportpdf',
  height: '800px',
  plugins: [
    "exportpdf", "advlist", "anchor", "autolink", "charmap", "code", "codesample", "fullscreen",
    "help", "image", "insertdatetime", "link", "lists", "media",
    "preview", "searchreplace", "table", "visualblocks",
  ],
  toolbar: "undo redo | exportpdf | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
  image_caption: true,
  exportpdf_converter_options: {
    format: 'A4',
    margin_top: '1in',
    margin_right: '1in',
    margin_bottom: '1in',
    margin_left: '1in'
  }
});

Basic setup

To add the Export to PDF plugin to the editor, add exportpdf to the plugins option in the editor configuration.

For example:

tinymce.init({
  selector: 'textarea',
  plugins: 'exportpdf',
  toolbar: 'exportpdf',
  exportpdf_service_url: '<service url>'
});

Options

The following configuration options affect the behavior of the Export to PDF plugin.

exportpdf_service_url

The Export to PDF uses the HTML to PDF converter service to generate the document-name.pdf files.

The Export to PDF feature is currently only available exclusively for on-premise setups, requiring a self-hosted HTML to PDF converter service and the exportpdf_service_url option to be properly configured. If you require access to this feature, please contact us. Refer to our on-premises documentation for detailed instructions on deploying the Export to PDF service server-side component using Docker.

Configure the exportpdf_service_url setting in your TinyMCE instance to match your custom host. For example, if your host is mycustomhost.com, set the URL to https://mycustomhost.com/.

Type: String

Example: using exportpdf_service_url

tinymce.init({
  selector: 'textarea',
  plugins: 'exportpdf',
  toolbar: 'exportpdf',
  exportpdf_service_url: '<service_url>'
});

exportpdf_converter_options

This option allows the editor to download a PDF document containing its content, along with the specified options defined in the exportpdf_converter_options.

Type: Object

As of TinyMCE 7.5.0, the exportpdf_converter_options setting now comes with a default value set to the following:
Default value:
exportpdf_converter_options: {
  format: 'Letter',
  margin_top: '1in',
  margin_right: '1in',
  margin_bottom: '1in',
  margin_left: '1in'
}

Example: using exportpdf_converter_options

tinymce.init({
  selector: 'textarea',
  plugins: 'exportpdf',
  toolbar: 'exportpdf',
  exportpdf_service_url: '<service_url>',
  exportpdf_converter_options: {
   	header_html: '<p>HEADER</p>', // example
   	header_and_footer_css: 'p { color: blue }', // example
  },
})
The exportpdf_service_url option must be configured for the Export to PDF plugin to work.

For comprehensive details regarding the exportpdf_converter_options, please refer to the API documentation available for the Export to PDF Premium plugin.

exportpdf_converter_style

The exportpdf_converter_style option allow for customization of the styles applied to the exported PDF document, providing flexibility in controlling its appearance.

Type: String

Default value: ''

Example: using exportpdf_converter_style

tinymce.init({
  selector: 'textarea.tinymce',
  plugins: 'exportpdf',
  toolbar: 'exportpdf',
  exportpdf_service_url: '<service_URL>', // required
  exportpdf_converter_options: { // required to support "exportpdf_converter_style"
    header: [
      {
        html: '<h1>First page header.</h1>', //example
        css: 'h1 { font-size: 30px; }', //example
      }
    ],
  },
  exportpdf_converter_style: 'p { color: cyan !important }' // requires both "exportpdf_converter_style" and "exportpdf_service_url" to be set.
});

Toolbar buttons

The Export to PDF plugin provides the following toolbar buttons:

Toolbar button identifier Description

exportpdf

Generates a PDF file directly from the editor.

These toolbar buttons can be added to the editor using:

The Export to PDF plugin provides the following menu items:

Menu item identifier Default Menu Location Description

exportpdf

Export to PDF

Generates a PDF file directly from the editor.

These menu items can be added to the editor using:

Commands

The Export to PDF plugin provides the following TinyMCE commands.

Command Description

ExportPDF

Generates a PDF file directly from the editor with the filename document.pdf.

Example
tinymce.activeEditor.execCommand('ExportPDF');

API Reference

Explore the comprehensive API documentation for the Export to PDF Premium plugin at Export to PDF.