How

npm install --save @progress/kendo-react-pdf @progress/kendo-drawing
import { PDFExport } from '@progress/kendo-react-pdf';
<PDFExport paperSize={'Letter'}
fileName="_____.pdf"
title=""
subject=""
keywords=""
ref={(r) => this.resume = r}>
<div>content</div>
</PDFExport>
Empty empty empty
<PDFExport paperSize={'Letter'}
fileName="_____.pdf"
title=""
subject=""
keywords=""
ref={(r) => this.resume = r}>
<div style={{
height: 792,
width: 612,
padding: 'none',
backgroundColor: 'white',
boxShadow: '5px 5px 5px black',
margin: 'auto',
overflowX: 'hidden',
overflowY: 'hidden'}}>
content
</div>
</PDFExport>
Looks like a piece of paper now
// Add this method to the React 
exportPDF = () => {
this.resume.save();
}
// Add this to the render method
<button onClick={this.exportPDF}>download</button>
Download button!

Turning SVGs into Canvas items into images

npm install canvg
import canvg from 'canvg';
import ReactDOMServer from 'react-dom/server';
import { faGithub } from '@fortawesome/free-brands-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
// I set a canvas loaded boolean in the constructor
constructor() {
super();
this.canvLoaded = false;
this.githubIcon = null;
}
// function to convert SVG to image. htmlString is optional
convertSVGToImage = (htmlString) => {
// if FontAwesome, run this next part
let htmlString = ReactDOMServer.renderToStaticMarkup(
<FontAwesomeIcon icon={faGithub} />);
// for both FontAwesome and regular SVG:
canvg(this.refs.canvas, htmlString);
this.githubIcon = this.refs.canvas.toDataURL('image/png')
}
componentDidMount() {
this.convertSVGToImage();
}
// Create a conditionally loaded canvas (will only need it once,
// assuming you store your image data somewhere after you run it
// through the function
render() {
return (
<div>
{/* invisible canvas, and note the reference */}
{!this.canvLoaded &&
<canvas ref="canvas" style={{ display: 'none' }}>
</canvas>
}
<PDFExport>...
{this.canvLoaded && <img src={this.githubIcon} />}
</PDFExport>
</div>);
}
class App extends Component {
resume;
constructor() {
super();
this.iconsToConvert = [
{
icon: faGithub,
alt: 'github icon'
},
{
icon: faMedium,
alt: 'medium icon'
}
]
this.canvLoaded = false;
}
exportPDF = () => {
this.resume.save();
}
convertSvgToImage = (arr) => {
let canv = this.refs.canvas;
if (!this.canvLoaded) {
this.canvLoaded = true;
canv.getContext("2d");
arr.forEach((d, i) => {
let htmlString = ReactDOMServer.renderToStaticMarkup(
<FontAwesomeIcon icon={d.icon} size={"3x"} style={{ color: '#005696', height: '500px', width: '500px' }} />
);
canvg(canv, htmlString);
d.icon = canv.toDataURL("image/png");
});
this.setState({});
}
}
componentDidMount() {
this.convertSvgToImage(this.iconsToConvert);
}
render() {
return (
<div style={{ height: '100vh', width: '100vw', paddingTop: 20, backgroundColor: 'gray' }}>
{!this.canvLoaded && <canvas ref="canvas" style={{ display: 'none' }}>
</canvas>}
<div style={{ textAlign: 'center', marginBottom: 10 }}><button onClick={this.exportPDF} style={{ margin: 'auto' }}>download</button></div>
<PDFExport paperSize={'Letter'}
fileName="_____.pdf"
title=""
subject=""
keywords=""
ref={(r) => this.resume = r}>
<div style={{
height: 792,
width: 612,
padding: 'none',
backgroundColor: 'white',
boxShadow: '5px 5px 5px black',
margin: 'auto',
overflowX: 'hidden',
overflowY: 'hidden'
}}>Hi!
{this.canvLoaded && this.iconsToConvert.map((iconObject, index) => {
return <img src={iconObject.icon} key={'img-' + index} alt={iconObject.alt} style={{ height: 25, width: 25 }} />
})}
</div>
</PDFExport>
</div>
);
}
}
What the output looks like

Final words / tl;dr

Links

Software Engineer at Qualtrics || https://williamk.info/?q=med