//component that has the div i need pdf'ed
//
var reactToPdfUtils = require('../../../../../reactToPdf.js');
const handleSave = (sourceElement) => {
console.log('handleSave in SFV!');
reactToPdfUtils.useSavePDFNOW(pdfProps, cb, sourceElement)
function cb(sendDataContent){
console.log(sendDataContent)
}
};
//////////////////////////////////////////////////////////////////////////////////////////////
//reactToPdf.js file that houses the library function I manipulate to get the result
import React, { useEffect } from 'react';
import { savePDF } from '@progress/kendo-react-pdf';
import { drawDOM, exportPDF } from '@progress/kendo-drawing';
export const useSavePDFNOW = (pdfProps, cb, sourceElement) => {
//pdfprops i pass in from meta data in my mongoDB,
//I made a cb to let me know when the funtion is done
//I also do elaborate checking here myself for example
//to make sure there is only one div that that id
//create a template
//this function is declared then passed in later to savePDF,
//the magic in the library allows you to manipulate each page if you wanted. You can do some //cool stuff here.
try {
const onEveryPage = (props) => {
if (hasAfirstPage) {
if (props.pageNum === 1) {
document.querySelectorAll('#toPDF')[0].style.cssText = 'margin-top: -188.333px;height:100%;';
// document.querySelectorAll('kendo-pdf-page')[0].style.cssText = '';
return <Fragment></Fragment>;
} else {
return (
<div style={{ zIndex: '-999999', justifyContent: 'center', display: 'flex' }}>
<div id='header' style={{ textAlign: 'center', fontSize: headerFontToUse + 'px', backgroundRepeat: 'no-repeat', backgroundSize: '100%', backgroundColor: 'transparent', height: headerHeightToUse, width: headerWidthToUse, backgroundImage: `url(${headerSrcToUse})`, position: 'absolute', top: 10 }}>
{headerTextToUse}
</div>
<div id='watermarkImage' style={{ backgroundRepeat: 'no-repeat', backgroundSize: '100%', backgroundColor: 'transparent', height: waterMarkHeightToUse, width: headerWidthToUse, opacity: 0.5 /* Firefox, Chrome, Safari, Opera, IE >= 9 (preview) */, backgroundImage: `url(${waterMarkSrcToUse})`, position: 'absolute', bottom: -90, left: 300 }}></div>
<div id='pageNums' style={{ position: 'absolute', bottom: 0, right: '10px' }}>
Page {props.pageNum} of {props.totalPages}
</div>
<h6 id='footer' style={{ fontSize: footerFontToUse + 'px', backgroundColor: 'transparent', position: 'absolute', bottom: 0, margin: '6 auto' }}>
{footerTextToUse}
</h6>
</div>
);
}
} else {
return (
<div style={{ zIndex: '-999999', justifyContent: 'center', display: 'flex' }}>
<div id='header' style={{ textAlign: 'center', fontSize: headerFontToUse + 'px', backgroundRepeat: 'no-repeat', backgroundSize: '100%', backgroundColor: 'transparent', height: headerHeightToUse, width: headerWidthToUse, backgroundImage: `url(${headerSrcToUse})`, position: 'absolute', top: 10 }}>
{headerTextToUse}
</div>
<div id='watermarkImage' style={{ backgroundRepeat: 'no-repeat', backgroundSize: '100%', backgroundColor: 'transparent', height: waterMarkHeightToUse, width: headerWidthToUse, opacity: 0.5 /* Firefox, Chrome, Safari, Opera, IE >= 9 (preview) */, backgroundImage: `url(${waterMarkSrcToUse})`, position: 'absolute', bottom: -90, left: 300 }}></div>
<div id='pageNums' style={{ position: 'absolute', bottom: 0, right: '10px' }}>
Page {props.pageNum} of {props.totalPages}
</div>
<h6 id='footer' style={{ fontSize: footerFontToUse + 'px', backgroundColor: 'transparent', position: 'absolute', bottom: 0, margin: '6 auto' }}>
{footerTextToUse}
</h6>
</div>
);
}
};
//MaterialUI font fixing may have to do this elsewhere too specific
parentWrapper.querySelectorAll('[class*=MuiTypography], [class*=Text], [class*=formControl]').forEach(function (el, i) {
el.setAttribute('style', 'color: black; overflow: visible');
});
//save pdf on client side, send blob to dev to figure out what he or she wants to do with it
let pdfBlob;
savePDF(
parentWrapper,
{
pageTemplate: onEveryPage,
paperSize: 'a4',
fileName: 'Testing',
keepTogether: '.menu',
scale: 0.6,
title: 'Ametek/Powervar Passport',
margin: { top: marginTopToUse, bottom: marginBottomToUse }
},
() => {
// Server side rendering tested comes out exactly the same so long as the props match
drawDOM(parentWrapper, { pageTemplate: onEveryPage, scale: 0.6, paperSize: 'A4', margin: { top: 180, bottom: 10 } })
.then((group) => {
return exportPDF(group);
})
.then((dataUri) => {
// Send action to database
pdfBlob = dataUri.split(';base64,')[1];
ClassInstancesActions.StorePassportPDFToDisk(pdfBlob, 'testing');
cb(pdfBlob);
parentWrapper.remove();
});
}
);
} catch (error) {
console.log(error);
}
};
//This is in a style sheet
//i have a div within the div I pdf with an id of #divToDisableInteraction
//As long as there in there you can do any css magic to your pdf document here
//I tested this to high heaven you can get most things done here
//including adding an image url
kendo-pdf-document #divToDisableInteraction {
visibility: hidden;
}