To download the content from the Tiptap editor as a PDF in your Vue app, you can follow these steps:

  1. Install the required packages:
npm install @tiptap/core @tiptap/extension-table @tiptap/extension-paragraph @tiptap/extension-text @tiptap/extension-image
  1. Import and configure Tiptap in your Vue component:
<template> <div> <tiptap-vuetify :editor="editor" /> <button @click="downloadAsPdf">Download as PDF</button> </div> </template> <script> import { Editor } from '@tiptap/core'; import { Table, TableRow, TableCell } from '@tiptap/extension-table'; import { Paragraph } from '@tiptap/extension-paragraph'; import { Text } from '@tiptap/extension-text'; import { Image } from '@tiptap/extension-image'; import TiptapVuetify from 'tiptap-vuetify'; export default { components: { TiptapVuetify, }, data() { return { editor: new Editor({ extensions: [ Table, TableRow, TableCell, Paragraph, Text, Image, ], content: '<p>Your Tiptap content here</p>', }), }; }, methods: { downloadAsPdf() { // Get the content from the Tiptap editor const content = this.editor.getHTML(); // Create a hidden element to hold the content const downloadLink = document.createElement('a'); downloadLink.href = 'data:application/pdf;base64,' + btoa(content); = 'tiptap_content.pdf'; = 'none'; // Add the link to the document and click it document.body.appendChild(downloadLink);; document.body.removeChild(downloadLink); }, }, }; </script>
  1. Customize the content of the Tiptap editor to match your application's needs. You can set the content property of the editor data object to the desired content.

  2. The downloadAsPdf method retrieves the content from the Tiptap editor, converts it to a base64-encoded data URI (PDF format), and creates a temporary link to download the PDF. When the button is clicked, it triggers the download of the content as a PDF file named "tiptap_content.pdf".

Make sure to replace the content property in the editor data object with your actual Tiptap content.

Note that the content will be downloaded as a PDF, but the appearance and formatting may vary depending on the complexity of the content and the styling applied to it. For more precise control over the appearance of the PDF, you may need to use a PDF generation library like jspdf or html2pdf.js, as shown in previous responses.

Have questions or queries?
Get in Touch