uiwjs / react-md-editor

A simple markdown editor with preview, implemented with React.js and TypeScript.
https://uiwjs.github.io/react-md-editor
MIT License
2.03k stars 149 forks source link

[Feature] Markdown text export to pdf file #504

Open djerryz opened 1 year ago

jaywcjlove commented 1 year ago

You try pdf.js to export PDF

@djerryz

djerryz commented 1 year ago

I try dom-to-pdf, But the export effect is not good:

import { Button, Tooltip, Col } from 'antd';
import React, { useCallback, useRef, useState } from 'react';
import MDEditor, { commands, ICommand, TextState, TextAreaTextApi } from "@uiw/react-md-editor";
import domToImage from "dom-to-image";
import domToPdf  from "dom-to-pdf";

const downloadpdf = {
  name: 'downloadpdf',
  keyCommand: 'downloadpdf',
  buttonProps: { 'aria-label': 'Insert title3' },
  icon: (
    <svg width="12" height="12" viewBox="0 0 520 520">
      <path fill="currentColor" d="M15.7083333,468 C7.03242448,468 0,462.030833 0,454.666667 L0,421.333333 C0,413.969167 7.03242448,408 15.7083333,408 L361.291667,408 C369.967576,408 377,413.969167 377,421.333333 L377,454.666667 C377,462.030833 369.967576,468 361.291667,468 L15.7083333,468 Z M21.6666667,366 C9.69989583,366 0,359.831861 0,352.222222 L0,317.777778 C0,310.168139 9.69989583,304 21.6666667,304 L498.333333,304 C510.300104,304 520,310.168139 520,317.777778 L520,352.222222 C520,359.831861 510.300104,366 498.333333,366 L21.6666667,366 Z M136.835938,64 L136.835937,126 L107.25,126 L107.25,251 L40.75,251 L40.75,126 L-5.68434189e-14,126 L-5.68434189e-14,64 L136.835938,64 Z M212,64 L212,251 L161.648438,251 L161.648438,64 L212,64 Z M378,64 L378,126 L343.25,126 L343.25,251 L281.75,251 L281.75,126 L238,126 L238,64 L378,64 Z M449.047619,189.550781 L520,189.550781 L520,251 L405,251 L405,64 L449.047619,64 L449.047619,189.550781 Z" />
    </svg>
  ),
  execute: (state, api) => {
    const dom = document.getElementsByClassName("w-md-editor")[0];
    //console.log(dom);
    if (dom) {
      var options = {
        filename: 'test.pdf'
      };
      domToPdf(dom, options, function(pdf) {
        console.log('done');
      });

    }
  },
};

const Markdownwithup = ( markdownwithup_real ) => {
    const onclick_f = (e) =>{
        markdownwithup_real["button_click"]() ; 
    }

    return (
        <div style={{width: '100%', height: '100%'}}>
            <MDEditor
                style={{width: '100%', height: '100%'}}
                height={1000}
                value={markdownwithup_real["markdown_content"]}
                onChange={markdownwithup_real["setmarkdown_content"]}
                commands={[
                  downloadpdf,
                  commands.divider
                ]}
            />
            <Col span={4} className="gutter-row">
                <Button type="primary" onClick={onclick_f}>保存</Button>
            </Col>
        </div>
    )
}
export { Markdownwithup };

Another key is that multiple pages cannot be exported

alzin commented 5 months ago

please support this feature as it is needed!!