Our blazing fast Grid component built with pure JavaScript


Post by Webethics »

Hello

I have tried to implement the Export Pdf feature with the Vue js. The pdf file is imported successfully but I have facing issues related to the designing part.

As I have followed the below document.
https://www.bryntum.com/docs/grid/#Grid/feature/export/PdfExport

I have set up the node server and hit the export button to export the pdf. Then facing two issues related to the designing.

  1. Font awesome icons are not rendered.
  2. There is some white space in the downloaded pdf (how we can get rid of it).

I have attached the sample pdf which I got after downloading.

Thanks

Attachments
Sample.pdf
Sample pdf file for the reference
(54.04 KiB) Downloaded 128 times

Post by Maxim Gorkovsky »

Hello.
Exporting might be tricky with Vue development environment. We have a special demo showing how to do it: Gantt/examples/frameworks/vue/pdf-export

pdfExportFeature: {
    exportServer: 'https://localhost:8080',

    // Development config
    translateURLsToAbsolute: 'https://localhost:8081',
    clientURL: 'https://localhost:8081',
    // For production replace with this one. See README.md for explanation
    // translateURLsToAbsolute : 'https://localhost:8080/resources/', // Trailing slash is important
    keepPathName: false
}

For production env different settings are required.

Regarding size of the exported content, that might be related to the fact that we set a fixed size to the exported content. Best way to overcome this would be to pick smaller paper size, like A5.

What output would you expect in this case?


Post by Webethics »

The width option is fixed by changing the paper size A4 to A3.

But the font awesome icons are not rendered on the pdf.
Do you have any idea why the font awesome icons do not render in the pdf file?

There is a screenshot URL that we need to map in the pdf file.
https://prnt.sc/111c3sg

I have attached the file for reference.

Thanks for your quick response.

Attachments
Sample(2).pdf
Fixed width issue after changing paperFormat value.
(58.05 KiB) Downloaded 104 times

Post by pmiklashevich »

Please read the docs: https://www.bryntum.com/docs/grid/#Grid/feature/export/PdfExport#loading-resources
Loading resources chapter. You need to copy resources and set a path to them.

Pavlo Miklashevych
Sr. Frontend Developer


Post by Webethics »

I have read the loading resources chapter, but little bit confused about the resource path.

I have currently using the laravel+vue package and place the bryntum-grid package under the resource/js folder. I have copied the assets from the bryntum-grid package from the path (bryntum-grid/) (https://prnt.sc/115pgnr) and paste them under the path (bryntum-grid/examples/_shared/server) (https://prnt.sc/115pfsk) and trying to download the pdf.

The pdf is downloaded fine but the CSS and font awesome are not included in the pdf file.

The command which i have run is below
cd examples/_shared/server/ && npm i && node ./src/server.js -h 8080 -r resources

Configure export feature screenshot: https://prnt.sc/115q1ay

Please check and let me know what is gonna be wrong and how can I solve this?

Thanks


Post by Maxim Gorkovsky »

FontAwesome icons not loading mean that export server couldn't load font. Font is either missing from the path or load is blocked by CORS, which happens often. And it is unlikely resources config would help to fix vue app in development mode - vue dev server has own path to host resources. In this case clientURL comes in handy, which I didn't see you've configured.
Easiest way to tell what goes wrong is to check network tab, copy HTML sent to the server, put it to the local file and open in browser. There should be errors in console.


Post by Webethics »

The issue is resolved, thanks for the quick response.


Post Reply