1. Home
  2. Forum
  3. Vue
  4. Printing and PDF/Excel exporting not working in Vue 3 + Electron

Printing and PDF/Excel exporting not working in Vue 3 + Electron

Hi,

It seems that printing and PDF/Excel exporting does not work when building with Electron and Vue 3. Is it an issue with Electron or something else wrong?

P.S.

- Procedures to run the sample

You could navigate to the debug section of VS Code and launch in the predefined mode called "electron: debug" or "electron: dev" on Windows/macOS after installing all dependencies. As an alternative, you could also use the command `npm run electron:serve` under the root directory. Please note that the app is a demo for evaluating the feasibility of developing a Windows/macOS desktop app using Vue 3 and Electron. Hence, the app is not expected to be launched and work well via the browser. Instead, a desktop app should be error-free and launched with the dev mode which means you could invoke the browser developer tools using the keys Ctrl+Shift/option+I.

To navigate to the view containing the data grid, type "SZ000021" in the first textbox and select a recent date (one day recommended). After submitting the form, waiting for the search results.


Attachment: Kobe_4aad71db.zip

26 Replies
PS Pavithra Subramaniyam Syncfusion Team January 10, 2022 02:23 PM UTC

Hi Arvin, 
 
Thanks for contacting Syncfusion support. 
 
For Excel/Pdf export the Grid we need to call the exporting action inside the “toolbarClick” event handler. Please refer to the below sample code and demo link for more information. 
 
toolbarClick: function (args) { 
        switch (args.item.text) { 
            case 'PDF Export': 
                this.$refs.grid.pdfExport(); 
                break; 
            case 'Excel Export': 
                this.$refs.grid.excelExport(); 
                break; 
        } 
    }, 
 
 
We could face issue in printing the Vue 3 Grid at our side and currently we are validating this scenario with high priority. We sill update further details on January 13th , 2022. Until then we appreciate your patience. 
 
Regards, 
Pavithra S 
 


AS Arvin Staff replied to Pavithra Subramaniyam January 10, 2022 08:13 PM UTC

Hi,

I have tried to change the corresponding code in the `handleToolbarClick` method in the file named SearchResultGrid.vue. But it still has no luck. Is it because of the use of Electron since downloading cannot be triggered as normal?

Regards,

Arvin


P.S.

the code looks like:

handleToolbarClick(args) {
switch (args.item.id) {
case global.common.AUTO_FIT_ALL_KEY:
this.$refs[this.searchResultGridName].autoFitColumns([]);
break;

case global.common.EXCEL_EXPORT_KEY: // "ExcelExport"
this.$refs[this.searchResultGridName].excelExport();
break;

case global.common.PDF_EXPORT_KEY: // "PdfExport"
this.$refs[this.searchResultGridName].pdfExport();
break;

default:
return;
}
}

PS Pavithra Subramaniyam Syncfusion Team January 11, 2022 01:14 PM UTC

Hi Arvin, 

In our side the Excel exporting is working fine while calling the “excelExport” method. So please ensure whether this method is invoked properly inside the “handleToolbarClick” event. Please refer to the below code example and screenshot for more information 

/** 
     * Handle the click on the toolbar item. 
     */ 
    handleToolbarClick(args) { 
     switch (args.item.text) { 
        case global.common.AUTO_FIT_ALL_KEY: 
          this.$refs[this.searchResultGridName].autoFitColumns([]); 
          break; 
 
        case "Excel Export": // "Ensure whether this block is called” 
          this.$refs[this.searchResultGridName].excelExport(); 
          break; 
 
        case "PDF Export": // "PdfExport" 
          this.$refs[this.searchResultGridName].pdfExport(); 
          break; 
 
        default: 
          return; 
      } 
    },  
 
 
 
 
 
 
 
For Pdf Export we could see that you are using Chinese characters in Grid which needs to add the corresponding “ttf” file while exporting. Please refer to the below documentation for more details. 
 
 
Regards, 
Pavithra S 
  


AS Arvin Staff replied to Pavithra Subramaniyam January 12, 2022 03:21 AM UTC

Hi,

I can confirm that using `args.item.text` rather than `args.item.id` can invoke Excel/PDF export.

switch (args.item.text) {
case zhCN.default.autoFitAllColumnsName:
this.$refs[this.searchResultGridName].autoFitColumns([]);
break;

case syncfusion.default["zh-Hans"].grid.Excelexport:
this.$refs[this.searchResultGridName].excelExport();
break;

case syncfusion.default["zh-Hans"].grid.Pdfexport:
this.$refs[this.searchResultGridName].pdfExport({
pageOrientation: "Landscape",
theme: {
caption: {
font: new PdfTrueTypeFont(global.common.ALGERIA_FONT, 20), // global.common.ALGERIA_FONT refers to the same
Algeria font as that used in the doc
},
header: {
font: new PdfTrueTypeFont(
global.common.ALGERIA_FONT,
global.common.FILE_HEADER_FONT_SIZE
),
},
record: {
font: new PdfTrueTypeFont(global.common.ALGERIA_FONT, 13),
},
},
});
break;

default:
return;
} // end switch-case


However, I still get the following exception in the browser dev tool console for the PDF export even though I have configured a custom font using `PdfTrueTypeFont` following the doc link you provided. I was wondering if there is something else wrong with the usage of the PDF export function.


pdf-export.js:156
Uncaught (in promise) Proxy {isStreamCopied: false, defaultMargin: 40, streamWriter: null, document: PdfDocument, objects: PdfMainObjectCollection, …}[[Handler]]: Object[[Target]]: PdfDocument[[IsRevoked]]: false
(anonymous) @ pdf-export.js:156
Promise.catch (async)
(anonymous) @ pdf-export.js:155
Promise.then (async)
(anonymous) @ pdf-export.js:142
push../node_modules/@syncfusion/ej2-grids/src/grid/actions/pdf-export.js.PdfExport.Map @ pdf-export.js:141
push../node_modules/@syncfusion/ej2-grids/src/grid/base/grid.js.Grid.pdfExport @ grid.js:4122
push../node_modules/@syncfusion/ej2-vue-grids/src/grid/grid.component.js.GridComponent.pdfExport @ grid.component.js:429
handleToolbarClick @ SearchResultGrid.vue:205
push../node_modules/@syncfusion/ej2-base/src/observer.js.Observer.notify @ observer.js:101
push../node_modules/@syncfusion/ej2-base/src/base.js.Base.trigger @ base.js:190
push../node_modules/@syncfusion/ej2-vue-grids/src/grid/grid.component.js.GridComponent.trigger @ grid.component.js:150
push../node_modules/@syncfusion/ej2-grids/src/grid/actions/toolbar.js.Toolbar.toolbarClickHandler @ toolbar.js:366
push../node_modules/@syncfusion/ej2-base/src/observer.js.Observer.notify @ observer.js:101
push../node_modules/@syncfusion/ej2-base/src/base.js.Base.trigger @ base.js:190
push../node_modules/@syncfusion/ej2-navigations/src/toolbar/toolbar.js.Toolbar.clickHandler @ toolbar.js:583

Besides, is there any update for printing? Thanks for your work and reply!


Regards,

Arvin


PS Pavithra Subramaniyam Syncfusion Team January 12, 2022 01:40 PM UTC

Hi Arvin, 

While rendering the Grid in your shared sample we get no records in Grid even with “SZ000021” value and selecting a recent date. Please refer to the below screenshot for more information 

 

Kindly share the details what date should be selected to get the data in Grid that will be helpful for us to validate the PDF issue at our end. 

For Printing issue, we have forwarded the query to the corresponding for validation. So, we will update the further details on January 13th , 2022 as promised. 

Regards, 
Pavithra S 


AS Arvin Staff replied to Pavithra Subramaniyam January 12, 2022 02:24 PM UTC

Hi,

I have provided a demo using a specific local data source. Please type "SZ000021" and select 29 Nov 2021 only (2021/11/29 - 2021/11/29) to make the demo work.


Thanks much for your work and reply!


Regards,

Arvin


Attachment: Kobe_692206f2.zip

PS Pavithra Subramaniyam Syncfusion Team January 13, 2022 11:50 AM UTC

Hi Arvin, 

Thanks for sharing the sample. 

While validating the sample we could see that the Chinese character you are using is not supported with pdf library. So, we suggest you use base64 string of corresponding Chinese “.ttf” file to overcome the reported issue. 

 

Regards, 
Pavithra S 


AS Arvin Staff replied to Pavithra Subramaniyam January 14, 2022 10:21 PM UTC

Hi,

Thanks for your reply!

While currently I only have problems with the printing function, I was wondering if you plan to provide a workaround since I reckon that it is only an issue when using Electron with Vue.js 3.

Regards,

Arvin


AS Arvin Staff January 19, 2022 01:53 AM UTC

Sorry, but any update available?


PS Pavithra Subramaniyam Syncfusion Team January 19, 2022 09:15 AM UTC

Hi Arvin, 

Sorry for the delay in getting back to you. Since we are facing some complexities with the reported issue validation, we will update further details on January 21st, 2022. Until then we appreciate your patience. 

Regards, 
Pavithra S  


PS Pavithra Subramaniyam Syncfusion Team January 21, 2022 03:06 PM UTC

Hi Arvin, 

Thanks for your patience. 

We have considered the reported scenario as a defect from our side. we will share the defect report and timeline on January 25th, 2022.  

Regards, 
Pavithra S 


JC Joseph Christ Nithin Issack Syncfusion Team January 26, 2022 04:42 PM UTC

Hi Arvin, 

  Sorry for the delay, we will provide the details on the defect shortly. We appreciate your patience until then. 

Regards, 
Joseph I.    


JC Joseph Christ Nithin Issack Syncfusion Team January 26, 2022 04:42 PM UTC

Hi Arvin, 

  Sorry for the delay, we will provide the details on the defect shortly. We appreciate your patience until then. 

Regards, 
Joseph I.    


PS Pavithra Subramaniyam Syncfusion Team January 27, 2022 07:44 AM UTC

Hi Arvin, 
 
Thanks for your patience. 
 
We have planned to include the fix for the issue “Script error occurs when Exporting (Printing) in the Vue3 Grid” in our patch release which is expected to be rolled out on February 9th, 2022.  
 
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link. 
 
 
Regards, 
Pavithra S 


JC Joseph Christ Nithin Issack Syncfusion Team February 10, 2022 05:30 PM UTC

Hi Arvin, 

   Sorry for the inconvenience caused. 

Due to some complexities involved in this issue, we were not able to include the fix for the issue “Script error occurs when Exporting (Printing) in the Vue3 Grid” as promised. Currently we have forwarded to the concern team, we will provide the updated timeline on or before  14th November, 2022. Until then we appreciate your patience.       

Regards, 
Joseph I. 


AS Arvin Staff replied to Joseph Christ Nithin Issack February 19, 2022 08:37 AM UTC

Hi Joseph,


Could you confirm if it were fixed in the latest version? Thanks!


Regards,

Arvin


GV Gokulraj Varatharajan Syncfusion Team February 23, 2022 05:26 AM UTC

Hi Joseph, 

Sorry for the inconvenience caused, 

We are unable to complete this bug as planned. However, we will prioritize and include this fix with our upcoming Volume 1 2022 release which is scheduled on end of March 2022. 

We appreciate your patience until then. 

Regards, 
Gokul 


GV Gokulraj Varatharajan Syncfusion Team April 11, 2022 01:06 PM UTC

Hi Joseph,


Sorry for the inconvenience,


We are unable to complete it as planned due to some internal complexities. However, we will prioritize and included it with our Volume 1 SP release which is scheduled on mid of May 2022.


We appreciate your patience until then.


Regards,

Gokul


KW Kamila Wasilewska May 17, 2022 10:08 AM UTC

We are experiencing the same issue. When you reckon to this issue be fixed?


GV Gokulraj Varatharajan Syncfusion Team May 18, 2022 12:34 PM UTC

Hi Team,


Sorry for the inconvenience,


We are unable to complete it as planned due to some internal complexities. However, we will prioritize and included it with our weekly patch release which is scheduled on the 31st of May 2022.


We appreciate your patience until then.


Regards,

Gokul


GV Gokulraj Varatharajan Syncfusion Team June 2, 2022 09:59 AM UTC

Hi Team,


Sorry for the inconvenience,


We are unable to complete it as planned. However, we will prioritize, and we will include it with our Volume 2 main release which is scheduled on the end of June 2022.


We appreciate your patience until then.


Regards,

Gokul


RS Ragunath Sukumaran Syncfusion Team July 5, 2022 03:38 PM UTC

Hi Team,


Sorry for the inconvenience,


We are unable to complete it as planned. However, we will prioritize, and we will include it with our Volume 2 SP release which is scheduled on the start of August 2022.


We appreciate your patience until then.


Regards,

Ragunath S


KW Kamila Wasilewska July 26, 2022 06:15 AM UTC

What is the probability of correcting this bug in Volume 2 SP release? We have been waiting for this fix for several months and it is a very important matter for us.


RS Ragunath Sukumaran Syncfusion Team August 3, 2022 02:29 PM UTC

Hi Kamila,


Sorry for the inconvenience,


We are working on this issue at high priority and we will include it with our weekly patch release which is scheduled on the 15th of August 2022 without any further delay.


We appreciate your patience until then.


Regards,

Ragunath S


RS Ragunath Sukumaran Syncfusion Team September 16, 2022 01:53 PM UTC

Hi Kamila,


Sorry for the inconvenience,


We are working on this issue at high priority and we will include it with our Volume 3 release which is scheduled to roll out on the end of September 2022 without any further delay.


We appreciate your patience until then.


Regards,

Ragunath S


TJ Theveshwar Jayakumar Syncfusion Team February 20, 2023 10:25 AM UTC

Hi Arvin,

 

Thanks for your patience.

 

We are glad to announce that we have fixed the issue - “Script error occurs when Exporting (Printing) in the Vue3 Grid” in our 20.4.43 patch release. So please update your packages to latest version to include this fix.

 

Feedback link:  https://www.syncfusion.com/feedback/32201/script-error-occurs-when-exporting-printing-in-the-vue3-grid

 

Release Notes:  https://ej2.syncfusion.com/vue/documentation/release-notes/20.4.43/?type=all#grid

 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

 

Regards,

Theveshwar


Loader.
Up arrow icon