I am trying to use pdfExport plugin and get the pages from the exporter.export(config) and write the HTML content to a new window and print instead of server print. It might not be a recommended approach but any alternative way to print on the client side. As the pages from the exporter provide an entire HTML document array, any suggested approach would be helpful.
Support Forum
Hello.
PdfExport doesn't allow an easy way to access exported pages, but here is what you can do:
- Extend PdfExport feature and implement method
print
- Copy some parts of the export method which are responsible for creating exporter and generating pages. Smth like:
async print() { const me = this, { client } = me; config = me.buildExportConfig(config); let result; config.exporterConfig = ObjectHelper.assign({ type : config.exporterType, translateURLsToAbsolute : config.translateURLsToAbsolute, keepPathName : config.keepPathName }, config.exporterConfig || {}); // Raise flag on the client to render all suggested dependencies client.ignoreViewBox = true; client.mask(me.exportMask); try { const exporter = me.getExporter(config.exporterConfig); const pages = await exporter.export(config); // pages here is an array of objects: [{ html : '<html>...</html' }] } ... }
- Register feature:
class MyPdfExport extends PdfExport { async print() {...} } GridFeatureManager.register(MyPdfExport, false)
- Use feature:
new Grid({ features : { myPdfExport : { ... } } })
- Use feature:
- Register feature:
Thanks for the snippet, This is almost similar to what I was doing currently, apart from registering it
pdfExport: {
onExportDialogExport: function({
values
}) {
const me = this;
let config = me.buildExportConfig(values);
config.exporterConfig = Sch.ObjectHelper.assign({
type: config.exporterType,
translateURLsToAbsolute: config
.translateURLsToAbsolute,
keepPathName: config.keepPathName
}, config.exporterConfig || {});
let exporter = me.getExporter(config.exporterConfig);
let pages = new Promise((resolve, reject) => {
resolve(exporter.export(config));
});
pages.then(data => {
//need to print the pages
}).catch(e => console.log(e));
}
}
To print them in a new window, anything specific that needs to be taken care of? because the array consists of an HTML string that also has the related scripts which are included in the scheduler page.
You can go further and redefine template for the exported page, so you only get page content. Please see contents of Exporter#pageTpl
: https://lh/bryntum-suite-release/gantt/docs/#Grid/feature/export/exporter/Exporter#function-pageTpl. By default it renders complete HTML page, you can change that to render all parts to the same page.
anything specific that needs to be taken care of
Doesn't seem so.
because the array consists of an HTML string that also has the related scripts which are included in the scheduler page.
Page should not contain any scripts, it only adds stylesheets by default.
I changed the pageTpl to generate only content
return Sch.TemplateHelper.tpl`
<div class="b-export-content">
${header && `<div class="b-export-header" style="width: 100%">${header}</div>`}
<div class="b-export-body"><div class="b-export-viewport">${html}</div></div>
</div>`;
and preparing a HTML document after the extraction of pages
let pages = new Promise((resolve,reject)=>{
resolve(me.exporter.export(config)).bind(me);
});
pages.then(resp =>{
let str = '';
resp.forEach(page => {
str += `${page.html}`;
});
let pWin=window.open('','PrintWindow');
let schLinks = [];//only necessary css files
$(".schCss").each(function(i,e){
schLinks.push(e.outerHTML)
});
str = `
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Appointment Book</title>
<style>
.b-export .b-export-content{position: relative !important;}
.b-widget-scroller{overflow: hidden !important;}
#sch-container .b-grid-body-container.b-widget-scroller{height: ${me.exporter.printObj.paperHeight}in;}
</style>
${schLinks.join('')}
</head>
<body class="b-export" style="width: ${me.exporter.printObj.paperWidth}in; height: ${me.exporter.printObj.paperHeight}in;">
${str}
</body>
</html>
`;
pWin.document.open();
pWin.document.write(str);
pWin.document.close();
}).catch(e => {me.client.unmask(); console.log(e)});
I am not able to get the correct scheduler pages displayed,
also is pdfExport supported in vertical mode of scheduler?
I am actually trying to replicate this behavior https://www.bryntum.com/docs/scheduler-for-extjs/#!/api/Sch.plugin.Printable
It's not on our immediate roadmap but we will try to look into this in the second half of the year. Ticket: https://github.com/bryntum/support/issues/2007
While printing when there are more resources on the scheduler, the time ranges are not displaying correctly on the bottom pages, since time ranges are appending to dom dynamically, by the time scheduler is scrolled and pages are captured, time ranges are not appending to dom, so on print pages, they are not displaying.
On the first few pages they display correctly, other pages to the bottom are not displaying the time ranges. It should show up as white, instead, they are empty, check from the resource "Khushi Ram"
Is it possible to show all time ranges on dom or adding delay to the scrolling?
- Attachments
-
- bryntum2.png (56.29 KiB) Viewed 1651 times
-
- bryntum1.png (71.95 KiB) Viewed 1651 times