Search
 
SCRIPT & CODE EXAMPLE
 

JAVASCRIPT

how to convert react component to image

import { exportComponentAsJPEG, exportComponentAsPDF, exportComponentAsPNG } from 'react-component-export-image';
import React from 'react';

class ComponentToPrint extends React.Component {
 render() {
   return <div>Hello World</div>;
 }
}
export default class MyComponent extends React.Component {
 constructor(props) {
   super(props);
   this.componentRef = React.createRef();
 }

 render() {
   return (
     <React.Fragment>
       <ComponentToPrint ref={this.componentRef} />
       <button onClick={() => exportComponentAsJPEG(this.componentRef)}>
         Export As JPEG
       </button>
       <button onClick={() => exportComponentAsPDF(this.componentRef)}>
         Export As PDF
       </button>
       <button onClick={() => exportComponentAsPNG(this.componentRef)}>
         Export As PNG
       </button>
     </React.Fragment>
   );
 }
}
Comment

PREVIOUS NEXT
Code Example
Javascript :: moment js 
Javascript :: postmark with nodejs 
Javascript :: push json data into a list of objects in flutter 
Javascript :: jquery to copy two input fields into one with a space between 
Javascript :: what does event emitter do in angular 
Javascript :: v- v-bind : 
Javascript :: javascript select audio device 
Javascript :: modify array elements javascript 
Javascript :: convert json data to a html table 
Javascript :: Usage rate-limiter 
Javascript :: django csrf failed ajax case 
Javascript :: Return a Sorted Array Without Changing the Original Array 
Javascript :: round down js 
Javascript :: object find javascript 
Javascript :: object.keys javascript 
Javascript :: return array content only js 
Javascript :: how to check is the key of a localstorage is emopty 
Javascript :: alpine js update data 
Javascript :: javascript alert html 
Javascript :: can we get the value of form control after disabling it angular 
Javascript :: js how to get element csswidth 
Javascript :: Fill in to get the value of the form field with id="name" and set it as the text of the paragraph with id="txt". 
Javascript :: react native swipe screen 
Javascript :: javascript Strict Mode in Variable 
Javascript :: reverseString / Palindrome / Split string / Reverse Array 
Javascript :: visual studio node.js cleint missing intents error 
Javascript :: regex more than one character 
Javascript :: aframe basic example 
Javascript :: jquery slick drag goes back 
Javascript :: Select First Element querySelector 
ADD CONTENT
Topic
Content
Source link
Name
5+4 =