DataTable: Print Not working in Angular 9 and Electron

Issue

I have an android 9 app recently converted to Electron app.
For DataTable, I have enabled Print and Excel options. Excel upload is fine and exporting data.
But Print is not working.
Its giving the following error

TypeError: Cannot read property 'close' of undefined at _Api.action (buttons.print.js:140) at action (dataTables.buttons.js:559)

I could see that win.document is null in buttons.print.js.

Also if I build it as normal ANgular app ( ng serve) , print is working fine too

In Angular.JSON I have loaded the script in following order

"node_modules/jquery/dist/jquery.min.js",
"node_modules/jquery/dist/jquery.js",
"node_modules/datatables.net/js/jquery.dataTables.js",
"node_modules/datatables.net-buttons/js/dataTables.buttons.js",
"node_modules/datatables.net-buttons/js/buttons.colVis.js",
"node_modules/datatables.net-buttons/js/buttons.flash.js",
"node_modules/datatables.net-buttons/js/buttons.html5.js",
"node_modules/datatables.net-buttons/js/buttons.print.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/jszip/dist/jszip.js"

The package.json file is as follows

"dependencies": {
    "jquery": "^3.4.1",
    "datatables.net": "^1.10.19",
    "datatables.net-buttons": "^1.5.4",
    "datatables.net-buttons-dt": "^1.5.4",
    "datatables.net-dt": "^1.10.19",
    "@angular-devkit/build-angular": "^0.900.2",
    "@angular/animations": "~9.0.1",
    "@angular/common": "~9.0.1",
    "@angular/compiler": "~9.0.1",
    "@angular/core": "~9.0.1",
    "@angular/forms": "~9.0.1",
    "@angular/localize": "9.0.1",
    "@angular/platform-browser": "~9.0.1",
    "@angular/platform-browser-dynamic": "~9.0.1",
    "@angular/router": "~9.0.1",
    "@fortawesome/angular-fontawesome": "^0.3.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.14",
    "@fortawesome/free-solid-svg-icons": "^5.7.1",
    "@ng-bootstrap/ng-bootstrap": "4.2.2",
    "angular-datatables": "^7.0.0",
    "bootstrap": "^4.3.1",
    "core-js": "^2.5.4",
    "cors": "^2.8.5",
    "express": "^4.16.4",
    "indexeddb-angular": "^0.1.8",
    "jszip": "^3.1.5",
    "luxon": "^1.16.0",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.23",
    "ngx-indexed-db": "^2.0.5",
    "ngx-material-timepicker": "^3.1.0",
    "ngx-multi-window": "0.3.2",
    "ngx-print": "^1.1.4",
    "popper.js": "^1.14.6",
    "rxjs": "~6.5.4",
    "tslib": "1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "8.4.1",
    "@angular-eslint/builder": "0.0.1-alpha.18",
    "@angular/cli": "9.0.2",
    "@angular/compiler-cli": "9.0.1",
    "@angular/language-service": "9.0.1",
    "@ngx-translate/core": "12.0.0",
    "@ngx-translate/http-loader": "4.0.0",
    "@types/datatables.net": "^1.10.14",
    "@types/datatables.net-buttons": "^1.4.0",
    "@types/jasmine": "3.3.16",
    "@types/jasminewd2": "2.0.8",
    "@types/jquery": "^3.3.29",
    "@types/mocha": "5.2.7",
    "@types/node": "12.11.1",
    "@typescript-eslint/eslint-plugin": "2.19.0",
    "@typescript-eslint/parser": "2.19.0",
    "chai": "4.2.0",
    "codelyzer": "5.1.2",
    "conventional-changelog-cli": "2.0.32",
    "core-js": "3.1.4",
    "cross-env": "7.0.0",
    "electron": "8.0.0",
    "electron-builder": "22.3.2",
    "electron-reload": "1.5.0",
    "eslint": "6.8.0",
    "eslint-plugin-import": "2.20.1",
    "jasmine-core": "3.4.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "4.2.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "2.1.1",
    "karma-electron": "6.3.0",
    "karma-jasmine": "2.0.1",
    "karma-jasmine-html-reporter": "1.4.2",
    "mocha": "6.2.2",
    "ngx-electron": "2.2.0",
    "npm-run-all": "4.1.5",
    "protractor": "~5.4.0",
    "spectron": "10.0.1",
    "ts-node": "8.3.0",
    "tslint": "~5.11.0",
    "typescript": "3.7.5",
    "wait-on": "4.0.0",
    "webdriver-manager": "12.1.7"
  },

Any pointers on this will be helpful

Solution

The information given in the post helped me ( angular application build in electron print a div shows blank window ).

The answer is : in main.ts for electron, need to add
nativeWindowOpen: true as below.

win = new BrowserWindow({
    x: 0,
    y: 0,
    width: size.width,
    height: size.height,
    webPreferences: {
      nodeIntegration: true,
      nativeWindowOpen: true, //**** add this**
      allowRunningInsecureContent: (serve) ? true : false,
    },
  });

Answered By – Raghu Vallikkat

Answer Checked By – Marie Seifert (AngularFixing Admin)

Leave a Reply

Your email address will not be published.