react-md-editor
react-md-editor copied to clipboard
[Feature] Markdown text export to pdf file
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
please support this feature as it is needed!!