Wednesday, July 6, 2022

Export Website as PDF - Using Headless browser

 There are many way we can download website html in C# and export it as PDF or however we wanted. But most of these ways not having option to render complete JavaSript and render the page fully.


Option 1: 

Simply use WebClient and export website into html then to PDF

using (WebClient client = new WebClient())

    {

        byte[] websiteData = client.DownloadData("somewebsiteurl");

        File.WriteAllBytes(“savepath”, websiteData);

        //do further steps to convert html to pdf

    }


Option 2: 

Use Headless browser with Puppetter to export as PDF from URL, here you can add more wait handlers to render the JavaScript

Ref: 

https://developer.chrome.com/docs/puppeteer/

https://www.puppeteersharp.com/  


Using JS: 

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'example.png' });

  await browser.close();
})();


Using C#: 


using var browserFetcher = new BrowserFetcher();

await browserFetcher.DownloadAsync();

await using var browser = await Puppeteer.LaunchAsync(

    new LaunchOptions { Headless = true });

await using var page = await browser.NewPageAsync();

await page.GoToAsync("http://www.google.com");

await page.ScreenshotAsync(outputFile);


Note: we can also use installed browsers for exporting website as below



Browser browser = await Puppeteer.LaunchAsync(new LaunchOptions

{

Headless = true,

Args = "{ "--disable-features=site-per-process", "--disable-web-security" }",

ExecutablePath = “any chromimum browser exe path”

});


Wednesday, June 22, 2022

Angular Ng Build out of memory issue

 If you come accross issue with Angular ng build in prod mode for out of memory issue, like below

Command: ng build --prod


Include command with "node --max_old_space_size=5120 ./node_modules/@angular/cli/bin/", you can increase the size however wanted. This will solve the issue, we can also update this size in environment variables of system. 

Command: node --max_old_space_size=5120 ./node_modules/@angular/cli/bin/ng build --prod



Monday, April 25, 2022

JSON Path to use in Angular Projects

How to use JSON Path to query any JSON object.

For example, consider below simple JSON, if you want to query JSON we can use simply query as this.obj.name or this.obj.id to access to the JSON

this.obj ={

   id: 1,

   "name": "balaji"

}

For array object we can use index, for ex: this.objData[0].id. For more JSON path to find we can refer https://jsonpathfinder.com/

this.objData = {

        data: [

  {

    "id": 1,

    "name": "Balajiprasad",

    "age": 18,

              "address": {

                      "state": "TN",

                       "country": "India"

                } 

 

  },

  {

    "id": 2,

    "name": "prasad",

    "age": 28,

     "address": {

                      "state": "Tx",

                       "country": "US"

                } 

  }

]}


In angular project, if we need to use JSON path dynamically then we can refer the jsonpath library Ref: https://www.npmjs.com/package/jsonpath

Steps to use,

1. Add "json-path" in package.json file under dependencies

    "dependencies": {

"jsonpath": "1.1.1"

}


2. Add reference of "json-path" directly in component. No need to specify in App.module

    import * as jp from 'jsonpath'

3. Use the JSON path in code , need to use $.. (double dots)

   let state = jp.query(this.objData, '$..data[0].address.state')

 



Tuesday, April 12, 2022

Excel - Find sum of all digits to single digit

In excel, use below formula to get sum of all digits into single digit  (For ex: 3268 -> Total 1). This is useful to findout vehicle number's total.

Formula: =IF(MOD(A1,9)=0,"9",MOD(A1,9))