score:2
Accepted answer
kendo doesn't support rendering/saving pdf outside dom: https://github.com/telerik/kendo-react/issues/307#issuecomment-521232445
score:-1
the first argument to savepdf is a dom element and not a jsx element. this will work.
class app extends component {
exportpdf() {
// todo: fetch data from backend
// todo: move content generator to different function
// const element = <h2>teeeeest</h2>
const element = document.getelementbyid('test')
savepdf(element, {
papersize: 'a4',
filename: 'report.pdf',
margin: { top: '2cm', left: '1.5cm', right: '1.5cm', bottom: '2cm' },
scale: 0.8,
keeptogether: '.card',
});
}
render() {
return (
<div>
<h1 id='hello'>hello kendo</h1>
<h2 id='test' style={{display: 'none'}}>teeeest</h2>
<navlink classname="pr-1" to="#" onclick={() => this.exportpdf()}>download pdf</navlink>
</div>
);
}
}
here's the link to the documentation for savepdf
method - https://www.telerik.com/kendo-react-ui/components/pdfprocessing/api/savepdf/
Source: stackoverflow.com
Related Query
- React: Generate and save PDF onClick() problem - Kendo
- Take screenshot of React app and generate it as PDF
- Kendo React PDF and changing from class component to function component
- html2canvas and React to generate pdf doesn't work
- Problem with Axios and onClick - React JS
- React onClick and preventDefault() link refresh/redirect?
- Get object data and target element from onClick event in react js
- React - how to capture only parent's onClick event and not children
- React onClick and onTouchStart fired simultaneously
- React JS : history.push is not a function error and it isn't navigating to a different page onclick of swal
- Handle React onDoubleClick and single onClick for same element
- Auto save form fields in react and redux
- generating pdf from Html in React using html2canvas and jspdf
- Formik React with 2 buttons (Submit and Save) to submit form - Save button not to trigger validation
- @react-pdf/renderer. How to generate PDF and download it
- how to solve the problem of "folly/Portability.h" and "File .../main.jsbundle does not exist" in React Native?
- React <a> tag and button onClick propagation
- How to edit react bootstrap table and save data after editing
- How to generate form and crud using Spring and React
- Creating a Custom Button in React Typescript and add onClick Event
- mapping an array of objects and changing the value with on onClick in React
- Save and retrieve states with redux-persist - React Native
- Fetch and setInterval react hooks problem
- Save Position of dragged items with Dragula Drag and Drop, React Version (react-dragula)
- Advantages and Understanding of using Currying Function pattern in onClick Event handler in React
- Build problem with React viteJS and was amplify
- Handling onClick and onKeyPressDown in the same function React
- React Convert Div and Table Component Into PDF With Multiple Pages and CSS
- React pdf onclick download
- What is the best way to save my dynamicly created data using React and Javascript?
More Query from same tag
- How I can set two components at same time with sharing set state?
- Error with calling graphQl mutation from react app
- How can I access the ref of the BaseComponent or any level of the components?
- Redirect to another page after GET call in modal form in React
- JSX error: Unexpected Token, expected ","
- How do I get my react js app to start watching my sass files?
- How do I render an API in React with a dynamic URL?
- React hooks: functoin, callback memo
- SVG icons with Material-UI: where to find, how to style?
- How to display elements of array inside an object
- Unable to locate button to simulate click - Unit Testing React w/ Mocha, Chai, Enzyme
- Warning: React does not recognize the `warnKey` prop on a DOM element
- Highcharts - How to show more than 30 columns side by side
- How to post more than one object using React JS, Axios with a Spring boot backend?
- Rendering multiple DOM elements from different HTML pages in the same app.js
- php cannot read FormData that contains multiple files
- Replace fetched search results on each new search in react-infinite-scroll-component
- React not displaying text upon form submission
- method definition of javascript class not working - react
- How to use global stylesheet with css loader
- How to update the state immediately in React functional component?
- Stop react show more button scrolling to bottom of content
- Modal dialog displays from all elements of mapped array. How to select each item by ts and react js?
- How can I get the date to show when component is first rendered? MERN stack
- Problem with correct routing in a React project
- Mac M1 Attempted import error: 'Switch' is not exported from 'react-router'
- Formik Validation Display Problem with bootstrap css
- Space between components in React Native styling
- Using NPM Modules in Namespaced Typescript project
- React app - disparity between debugger and console log