[REACT] Export PDF Alignment issues

[prem kumar]

Hi Team ,

The PDF export functionality works correctly on localhost, but on the server, the styles are missing when exporting to PDF. Eventhough the server response is success but still styles are missing.Attached the server response and pdf screenshots. Below is the code which I used for export pdf

const headerTpl = ({ currentPage, totalPages }) => `
    <div class="demo-export-header">
        <dl>
            <dt>Date: ${DateHelper.format(new Date(), "ll LT")}</dt>
            <dd>${totalPages ? `Page: ${currentPage + 1}/${totalPages}` : ""
  }</dd>	
        </dl>	
    </div>`;
const footerTpl = () => '<div class="demo-export-footer"><h3>Ramco</h3></div>';

 {
                      type: "button",
                      ref: "exportButton",
                      icon: "b-fa-file-export-pdf",
                      text: "PDF",
                      onClick() {
                        let { gantt, scheduler, histogram } =
                          bryntumRefs.current;
                        gantt.features.pdfExport.showExportDialog();
   }

  pdfExport: {
          exportServer: "https://dev.bryntum.com:8082",
          headerTpl,
          footerTpl,
          exportDialog: {
            autoSelectVisibleColumns: false,
            items: {
              columnsField: {
                value: [
                  "jobdetails",
                  "taskdesc",
                  "startdate",
                  "enddate",
                  "duar",
                  "promdate",
                  "tatduar",
                  "remarkscolumn",
                  "userdef1",
                ],
              },
            },
          },
        },

could you pls suggest any workarounds.

Thanks,
Prem Kumar

[mats]

You should not use our PDF export server, you should set up your own as described here: https://github.com/bryntum/pdf-export-server

[prem kumar]

Hi,

When I try to run the command mentioned in the repository steps (npm i pdf-export-server), it shows that it's not registered in npm. When I try to download a PDF, it fails to load the task. Could you please let me know which exact package needs to be downloaded in order to resolve this error?

Error:Failed to export task
at Queue.onJobFailed (C:\Users\Hema424RN15\OneDrive - Ramco Systems Limited\Desktop\pdf-export-server\src\queue.js:282:28)
at Queue.emit (node:events:518:28)
at C:\Users\Hema424RN15\OneDrive - Ramco Systems Limited\Desktop\pdf-export-server\src\queue.js:411:28
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Thanks,
Prem Kumar

[alex.l]

Hi Prem Kumar,

Could you please point me in which instructions did you find that step? Not sure I understand what step are you talking about.

[prem kumar]

Hi,

Apologies for confusion .After following the setup instructions, including cloning the repository (git clone git@github.com:bryntum/pdf-export-server.git), navigating to the project directory (cd pdf-export-server), and installing dependencies (npm install). I successfully got the server up and running.However, when attempting to download the PDF, I encountered the following error
Error:Failed to export task
at Queue.onJobFailed (C:\Users\Hema424RN15\OneDrive - Ramco Systems Limited\Desktop\pdf-export-server\src\queue.js:282:28)
at Queue.emit (node:events:518:28)
at C:\Users\Hema424RN15\OneDrive - Ramco Systems Limited\Desktop\pdf-export-server\src\queue.js:411:28
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)..please check the attached screenshot in the above mail thread.could u please suggest workarounds to fix it

Thanks

[alex.l]

Hi Prem Kumar,

Glad to hear we have a progress!

Please check Troubleshooting section of docs https://github.com/bryntum/pdf-export-server/blob/main/docs/troubleshooting.md
Run server in verbose and check logs to get more context about the problem.

$ node src/server.js --verbose

If no success, please share logs here, we will try to help you.

[prem kumar]

Hi Team,

The Pdf is downloading successfully on localhost:8080 .I want to download pdf with my production server url so I hav hardcoded the base url but I'm getting a response as its expecting the token..So I need to pass some custom headers in the request .Specifically, I need to include an authorization token and some custom context parameters when making a request to our production server.As I was new to this server side code like express js need some assistance with passing custom headers..This is how I tried in createServer function but not worked well

  createServer(options) {
        const
            me  = this,
            app = me.app = express();

    options = Object.assign({
        timeout : 5 * 60 * 1000,// 5 minutes
         baseUrl: 'https://bavndevut.ramcouat.com:4652/dsktpuigfed/gapi', //custom URL
         token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiZG11c2VyIiwidXNlciI6ImRtdXNlciIsInJfdGlkIjoicmFtY28iLCJjbGllbnRzZWNyZXQiOiJZMjl0TG5KaGJXTnZMbWR4YkhOMGRXUnBieTVqYjIwPSIsImNsaWVudGlkIjoieV...',
         g_ctxt_lang:1,
         g_ctxt_cmp:'basws',
         g_ctxt_ou:2,  
         g_ctxt_user:'dmuser',
         g_ctxt_role:'ramcorole'
    }, options);



      // Middleware to set custom headers
      app.use((req, res, next) => {
        res.setHeader('Authorization', `Bearer ${options.token}`);
        res.setHeader('g_ctxt_lang', options.g_ctxt_lang);
        res.setHeader('g_ctxt_cmp', options.g_ctxt_cmp);
        res.setHeader('g_ctxt_user', options.g_ctxt_user);
        res.setHeader('g_ctxt_role', options.g_ctxt_role);
        res.setHeader('g_ctxt_cmp', options.g_ctxt_cmp);
        next();
    });
----existing code -----

attaching necessary screenshots and file. could u please suggest any workarounds to handle custom header setup.

Thanks,
Prem Kumar

[Maxim Gorkovsky]

You can try making server to return the file instead of a link to the file: https://bryntum.com/products/gantt/docs/api/Grid/feature/export/PdfExport#config-sendAsBinary

[prem kumar]

Hi, still encountering with the same error.

 pdfExport: {
          // exportServer: "https://dev.bryntum.com:8082",
          // exportServer: "https://dev.bryntum.com:8082",
          // exportServer:"http://localhost:8080/",
          exportServer: "https://bavndevut.ramcouat.com:4652/dsktpuigfed/gapi/",
          headerTpl,
          footerTpl,
          sendAsBinary:true,
          exportDialog: {
            autoSelectVisibleColumns: false,
            items: {
              columnsField: {
                value: [
                  "jobdetails",
                  "taskdesc",
                  "startdate",
                  "enddate",
                ],
              },
            },
          },
        },

[Maxim Gorkovsky]

Sorry, I completely misunderstood your request. I thought you cannot download the file.

Default API does not allow to customize request headers. However, you can override one method which makes request to take full control over it. See this doc article: https://bryntum.com/products/gantt/docs/api/Gantt/feature/export/PdfExport#function-receiveExportContent

Also, I am not sure why do you provide server code. How is that express code related to the export? Please elaborate.