Get Free Trial

Export Pdf with all data expanded

Sarah asked on November 5, 2020

Hello, I am working with exporting charts to pdf. 
The problem is, that when I choose to expand all data, it only shows the views that are in view.
Is there a way to solve this without expanding the container?

I have attached a screenshot of the exported pdf, where you can see, that the fields are cut off, and another that shows the chart in the browser, and a scrollbar indicating that there is more data to be shown.

5 answers

Illia Yatsyshyn Illia Yatsyshyn Flexmonster November 5, 2020

Thank you for reporting the issue.
We will add the problem to our backlog. Our team will let you know if anything is changed on this point.
As for now, we suggest using one of the following workarounds to overcome this issue:
Resize the Flexmonster instance before exporting to PDF so that the whole legend area is visible. Next, perform the export and restore the component’s dimensions.
We have prepared the JSFiddle that demonstrates this approach.
Our team would like to provide some additional explanations about the following code snippets used in the example:
First, Flexmonster’s container should be wrapped with an additional div element. It is required to resize the component after it is initialized.

<div id="wrapper">
  <div id="pivotContainer"></div>

Next, set the width and height parameters of Flexmonster to 100%. It allows fitting the component’s dimensions correctly.

var pivot = new Flexmonster({
  height: "100%",
  width: "100%"

Finally, implement the function responsible for exporting. It should consider the current wrapper’s dimensions, scrollHeight, and scrollWidth properties of the legend container.

function exportToPdf() {
  flexmonster.on("afterchartdraw", () => { //subscribe to the "afterchartdraw" event"afterchartdraw"); //unsubscribe from the "afterchartdraw" event to avoid unwanted executions of the handler
    flexmonster.exportTo("pdf"); //perform export
  flexmonster.on("exportcomplete", () => { //subscribe to the "exportcomplete" event"exportcomplete"); //unsubscribe from the "exportcomplete" event to avoid unwanted executions of the handler = currentHeight; //restore the wrapper's height = currentWidth; //restore the wrapper's width
  let wrapper = document.querySelector("#wrapper"); //get the wrapper element
  let legend =
    document.querySelector("#fm-pivot-view > > div > > div"); //get the legend's container
  let currentHeight =; //save current height
  let currentWidth =; //save current width = wrapper.clientHeight + legend.scrollHeight + "px"; //resize the wrapper's height to show all legend's container. 180 is a maximum legend's container height by default. This will trigger the "afterchartdraw" event = wrapper.clientWidth + legend.scrollWidth + "px"; //resize the wrapper's width

Another approach is to export the pivot to HTML, adjust styling, and convert the result to PDF.
For example, use the destinationType: plain parameter of the exportTo API call to get the stringified HTML. Next, change the legend’s container dimensions and convert the result to PDF using the dedicated third-party library.
Please let us know if it works for you.
Feel free to contact us in case further questions arise.
Best regards,

Sarah November 6, 2020

Thank you, I have implemented your first suggestion. Out of curiosity I played around with your second suggestion. But I couldn’t figure out how to export the html string to pdf?

flexmonster.exportTo('html', {destinationType: 'plain'}, (res) => {var html =})
Illia Yatsyshyn Illia Yatsyshyn Flexmonster November 6, 2020

Thank you for your feedback. Our team is happy to hear the first approach works for you.
Concerning the generation of PDF files from the HTML string, we want to explain that it implies using another JavaScript library that would provide such a functionality.
We suggest checking out the jsPDF library. It provides a wide set of tools for generation and manipulation with PDF files. For example, it can generate a PDF from the HTML object. It means the process of the exporting would be the following:

  1. Use the exportTo API call to receive the HTML string.
  2. Adjust styling so that the whole legend is visible.
  3. Create an HTML object from the resulting string.
  4. Convert it to PDF using jsPDF.
  5. Remove the created HTML element from the page.
  6. Download the returned PDF file using the save method provided by jsPDF.

Please contact us in case any other questions arise.
Best regards,

Tanushree March 2, 2021

Hi Illia,
I’m having some problems when exporting the report to pdf.
Please refer the parallel thread for reference:
We are using custom datasource api and I have shared our report json with Maria Savrun.
Could you please use the shared data and investigate why the pdf file doesn’t open in our case?

Vera Didenko Vera Didenko Flexmonster March 3, 2021

Hello, Tanushree, 
Thank you for writing to us and for specifying your data source type. 
We would like to confirm that our team has received the provided data and is currently working on your case.
We will make sure to reach out to you as soon as there are any updates.
Kind regards,

Please login or Register to Submit Answer