How to get html/image/pdf

For full code, check out our live demo

How to get html

EditorHeader.tsx

const { values, submit, setFieldValue, mergetagsData, reset, dirty } =
  useEditorContext(); // Please note that useEditorContext can only be called under EmailEditorProvider (restriction of React context)

const onExportHTML = () => {
  const mjmlStr = EditorCore.toMJML({
    element: values.content,
    mode: "production",
    universalElements: universalElementSetting,
    beautify: true,
  });

  const templateHtml = mjml(mjmlStr).html;

  // If you need to get the html merged with mergetagsData, such as when sending a test email
  const finalMergeTagHtml = PluginManager.renderWithData(html, mergetagsData);

  console.log(templateHtml, finalMergeTagHtml);
};

How to get Image

Sometimes we need to generate email thumbnails

EditorHeader.tsx

const { values, submit, setFieldValue, mergetagsData, reset, dirty } =
  useEditorContext(); // Please note that useEditorContext can only be called under EmailEditorProvider (restriction of React context)

const onExportImage = async () => {
  const html2canvas = (await import("html2canvas")).default;
  const container = document.createElement("div");
  container.style.position = "absolute";
  container.style.left = "-9999px";
  const mjmlStr = EditorCore.toMJML({
    element: values.content,
    mode: "production",
    universalElements: universalElementSetting,
  });
  const templateHtml = mjml(mjmlStr).html;
  container.innerHTML = templateHtml;
  document.body.appendChild(container);

  const blob = await new Promise<any>((resolve) => {
    html2canvas(container, { useCORS: true }).then((canvas) => {
      return canvas.toBlob(resolve, "png", 0.1);
    });
  });

  console.log(blob);
};

How to get PDF

EditorHeader.tsx

const editor = useSlate();

const onExportPDF = async () => {
  const printCSS = document.createElement("style");
  printCSS.innerHTML = `
    @media print {
      body {
          -webkit-print-color-adjust: exact;
          color-adjust: exact;
      }
    }
  `;
  const contentWindow = ReactEditor.getWindow(editor);
  if (contentWindow) {
    contentWindow.document.body.appendChild(printCSS);
    contentWindow.print();
    printCSS.parentElement?.removeChild(printCSS);
  }
};