Exporting to PDF Mixed Content error

[amorimluc]

I'm trying to setup PDF exports now. For my export server I'm using the url https://gantt.st8ging.conslog.com, which is HTTPS. It works and starts exporting the PDF but then it crashes and I see this error on the console:

Mixed Content: The site at 'https://st8ging.conslog.com/' was loaded over a secure connection, but the file at 'https://gantt.st8ging.conslog.com/zL1CKxg-F1qRWJ-FhbCyY' was redirected through an insecure connection. This file should be served over HTTPS. See https://blog.chromium.org/2020/02/protecting-users-from-insecure.html for more details.

I think this happens because some assets are being requested over HTTP? Is there a way to force it to only use HTTPS?

[marcio]

Hey amorimluc,

Thanks for reaching out.

We don't have assets that require external loading, so most likely it is an external library that causes that error to happen, you can try to have a piece of deeper information debugging the server using the instructions provided here https://github.com/bryntum/pdf-export-server/blob/main/docs/troubleshooting.md.

We'll need to know which file/asset is being tried to be loaded via HTTP.

[amorimluc]

The problem is in this part of your code:

      async processExportContent(response, config) {
        const me = this;
        if (response.ok && me.openAfterExport) {
          // Clone Response to not block response stream
          response = response.clone();
          const contentType = response.headers.get('content-type');
          if (contentType.match(/application\/octet-stream/)) {
            const MIMEType = FileMIMEType[config.fileFormat],
              objectURL = await me.responseBlobToObjectURL(response, MIMEType),
              link = me.getDownloadLink(config.fileName, objectURL);
            link.click();
          } else if (contentType.match(/application\/json/)) {
            const responseJSON = await response.json();
            if (responseJSON.success) {
              const link = me.getDownloadLink(config.fileName, responseJSON.url);
              link.click();
            } else {
              Toast.show({
                html: responseJSON.msg,
                rootElement: this.rootElement
              });
            }
          }
        }
      }

Even though the server url is specified as 'https://gantt.st8ging.conslog.com' here in this code the responseJSON.url uses http instead of https. When I add in the following I stop getting Mixed Content errors:

if (responseJSON.url.startsWith('http://')) {
                responseJSON.url = responseJSON.url.replace('http://', 'https://');
              }

Why is the responseJSON.url not useing https like it should? Since the server url uses https.

[amorimluc]

Are we supposed to use 'http://localhost:8080' for the server url for production as well? Not just for local testing.

[marcio]

Hey amorimluc,

No, you're not supposed to use http://localhost:8080 as a default server location.

Could you please share what your PDF export config looks like? We need that information to understand why they're trying to use http instead of https in the request.

[amorimluc]

Here is our Gantt config where we set the pdf server URL:

const gantt = new Gantt({
      appendTo: "gantt_here",
      dependencyIdField : 'wbsCode',
      selectionMode     : {
          cell       : true,
          dragSelect : true,
          rowNumber  : true
      },
      project,
      features : {
        excelExporter : {
            // Choose the date format for date fields
            dateFormat : 'YYYY-MM-DD HH:mm'
        },
        mspExport : true,
        //xerExport: true,
        taskMenu : {
          items : {
              // Add extra Export menu item available on all tasks
              exportToIcs : {
                  icon   : 'b-fa b-fa-calendar-alt',
                  text   : 'Add to Calendar (.ics)',
                  weight : 900,
                  onItem({ taskRecord }) {
                      taskRecord.exportToICS({
                          // Here you can add some custom ICS values (See https://tools.ietf.org/html/rfc5545 for more information)
                      });
                  }
              }
          }
        },
        pdfExport : {
          exportServer: 'https://gantt.st8ging.conslog.com',
          // Required for font-awesome icons to display correctly
          

      // headerTpl,
      // footerTpl
    },
    rowReorder : {
      showGrip : true
    },
    nonWorkingTime : true
  },
  columns: [
    { type: 'wbs', hidden: true },
    { type: 'name', width: 250, text: CONSLOG.T.activity[CONSLOG.locale], showWbs: true},
    { type: 'startdate', width: 50 },
    { type: 'enddate', width: 50 },
    { type: 'duration', width: 50 },
    { type: 'resourceassignment', width: 100, text: CONSLOG.T.resources[CONSLOG.locale] },
    { text: CONSLOG.T.percent_done[CONSLOG.locale], field: 'percentDone', type : 'percentdone', showCircle : true, width : CONSLOG.locale != 'en' ? 75 : 50, sortable: false, group: false, editor: false},
  ],
  rowHeight: 35,
  barMargin: 7,
});

[Maxim Gorkovsky]

Try using this config instead: https://bryntum.com/products/gantt/docs/api/Grid/feature/export/PdfExport#config-sendAsBinary It will send binary as a response instead of providing a link to download a file

[amorimluc]

That worked, nice. Now the last issue we're seeing is that the final PDF does export and download, but no styling is applied on it. It's just text. What could be causing this?

[alex.l]

Hi,

What's in console?

Did you read https://github.com/bryntum/pdf-export-server?tab=readme-ov-file#exported-pdfpng-doesnt-look-correct
https://github.com/bryntum/pdf-export-server/blob/main/docs/architecture.md#to-generate-pdf-successfully-we-need-to-make-sure-resources-requested-by-the-page-are-accessible-to-the-page

[amorimluc]

Where are those "resources" located? On the Gantt download I see a resources directory. Is that the folder I should move to my server and point to when starting the pdf server?