Premium support for our pure JavaScript UI components


Post by nagasain »

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.


Post by Maxim Gorkovsky »

Hello.
PdfExport doesn't allow an easy way to access exported pages, but here is what you can do:

  1. Extend PdfExport feature and implement method print
  2. 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' }]
        } ...
    }
    1. Register feature:
      class MyPdfExport extends PdfExport {
        async print() {...}
      }
      
      GridFeatureManager.register(MyPdfExport, false)
      1. Use feature:
        new Grid({
          features : { myPdfExport : { ... } }
        })
      I hope this helps.

Post by nagasain »

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.


Post by Maxim Gorkovsky »

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.


Post by nagasain »

Thank you for the config pageTpl, that really helps


Post by nagasain »

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


Post by mats »

I am not able to get the correct scheduler pages displayed,

What seems to be the problem? Did you try to debug it?

also is pdfExport supported in vertical mode of scheduler?

Currently not.


Post by nagasain »

Each page individually loading in an iframe is one workaround we did to be able to load the pages and print.
Can we expect the pdfExport to support vertical mode in the scheduler any soon? as currently as an alternative we have to switch to horizontal mode to print.


Post by mats »

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


Post by nagasain »

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
bryntum2.png (56.29 KiB) Viewed 1596 times
bryntum1.png
bryntum1.png (71.95 KiB) Viewed 1596 times

Post Reply