How to implement Export to PDF functionality for Angular app

How to implement Export to PDF functionality for Angular app

Posted by: vinayakbagi on 13 May 2020, 12:37 am EST

• 

  vinayakbagi

  • Post Options:
  • Link
    Copy

  Posted 13 May 2020, 12:37 am EST

  Can you please share some demo code for implementing Export to PDF functionality for Angular app

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 14 May 2020, 3:43 am EST

  Hi,

  You may use the savePDF method to export to PDF. To use the PDF export feature you need to add “@grapecity/spread-sheets-print” and “@grapecity/spread-sheets-pdf” packages. Please refer to the following sample which demonstrates pdf export in angular:
  
  https://codesandbox.io/s/reverent-butterfly-mpvjp?file=/src/app/app.component.ts

  Regards

• 

  vinayakbagi

  • Post Options:
  • Link
    Copy

  Posted 14 May 2020, 6:50 pm EST

  Hi Sharad,

  Thanks now I am able to export to PDF I was not importing above dependencies. but now Excel is getting divided into multiple pages column A-G on one page then H-N on the next page.

  Is there any option that needs to be set for exporting the whole sheet on one page.

  Thanks and Regards,
  
  Vinayak

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 18 May 2020, 1:12 am EST

  Hi Vinayak,

  You may use fitPagesTall()/fitPagesWide() method for this functionality. Please refer to the following code snippet and sample which demonstrates the same

  var printInfo = new GC.Spread.Sheets.Print.PrintInfo();
      printInfo.fitPagesWide(1);
      printInfo.fitPagesTall(1);
      this.spread.getActiveSheet().printInfo(printInfo);
  

  sample: https://codesandbox.io/s/festive-meadow-2vj4w?file=/src/app/app.component.ts

  API references:
  
  • PrintInfo class: https://www.grapecity.com/spreadjs/docs/v13/online/SpreadJS~GC.Spread.Sheets.Print.PrintInfo.html

  Regards

• 

  vinayakbagi

  • Post Options:
  • Link
    Copy

  Posted 18 May 2020, 11:06 pm EST

  Hi Sharad,

  savePdf() functionality is working properly with Angular 7 but when I implemented same thing in Angular 6 I am getting this error (Refer Image).

  Thanks and Regards,
  
  Vinayak

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 20 May 2020, 1:39 am EST

  Hi Vinayak,

  The error image seems to be missing, could you please attach it again. Further we tried the pdf export functionality in angular6 and in our test we were able to successfully export to pdf without any issue. Following is the sample used for testing, could you please have a look at it and let us know if something is missing in the sample to replicate the issue:
  
  https://stackblitz.com/edit/hello-angular-6-zuhz5s?file=src/app/app.component.ts
  
  You may share a fresh sample that replicates the issue for us to investigate.

  Regards

• 

  vinayakbagi

  • Post Options:
  • Link
    Copy

  Posted 27 May 2020, 6:48 pm EST

  Hi Sharad,

  I tried using fitPagesTall()/fitPagesWide(). It generates pdf on single page only if I am creating excel manually using SpreadJS but it won’t work if I am importing any complicate excel file, it splits excel in different pages.

  Thanks and Regards,
  
  Vinayak

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 29 May 2020, 12:58 am EST

  Hi Vinayak,

  We are sorry but we are not able to replicate the at our end. Please make sure that you set printInfo for each sheet of spread before exporting. If the issue persists please share a sample file on which you are facing the issue so that we could further investigate it.

  Regards
  
  Sharad

• 

  vinayakbagi

  • Post Options:
  • Link
    Copy

  Posted 25 June 2020, 8:54 pm EST

  Hi Sharad,

  this.spread.getActiveSheet().printInfo(printInfo);
  
  applies print info only to current active sheet, can you let me know how to apply print info to all sheets.

  Thanks and Regards,
  
  Vinayak

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 29 June 2020, 12:12 am EST

  Hi Vinayak,

  You may loop through to the spread.sheets array and set the printInfo one by one. Please refer to the following code snippet and attached sample which demonstrates the same:

  this.spread.sheets.forEach(sheet=>{
        sheet.printInfo(printInfo)
      })
  

  Sample: https://stackblitz.com/edit/hello-angular-6-d2k4kg?file=src/app/app.component.ts

  Regards