Zoom in, out and print the image

Imageviewer is very good package for zoom image. you can install it from Nuget package

npm install imageviewer

It Provides functionality like to zoom in , Zoom Out, Rotate the image.  you can even play in slide view. but does not provide print functionality.

To implement Print functionality requires some changes in Viewer.js and viewer.css

Changes of Viewer.Js

1) In Viewer.TEMPLATE  add one li after flip-vertical.


 '<li class="viewer-flip-vertical" data-action="flip-vertical"></li>' +
            '<li class="viewer-print" data-action="print"></li>' +

2) On click: function (e)  Add another case print below flip-vertical

               case 'flip-vertical':
                    this.scaleY(-image.scaleY || -1);
                    break;

                case 'print':
                    this.printDiv();
               
                    break;

3) Add function in js.

        printDiv: function()
        {
            $('.viewer-canvas').print();
        },


Viewer.css change

.viewer-print {
    background: url(/Content/images/print.png) no-repeat;
    background-size: 11px !important;
    background-position: center;
}

.viewer-toolbar {
 width: 315px;
}

HandsonTable Create Anchor tag dynamically

var dataResult = dataResponse.Items;

dataResponse.Items is your resultset.

If you want to set anchor tag and redirect to any other page on click of view.

   for (var i = 0; i < dataResult.length; i++) {
                         
                            dataResult[i].View = "<a onClick=' RedirectToMaintenancePage(" + dataResult[i].WarehouseNumber + "," + dataResult[i].Ordered + "," + dataResult[i].Received + ",\"" + dataResult[i].PONumber + "\",\"" + dataResult[i].PartNumber + "\",\"" + dataResult[i].Make + "\" )'>View</a>";
                       
                        }

 var hotElement = document.querySelector('#hot');

                        var hotSettings = {
                            data: dataResult,
                            columns: [
                                 { data: "View", renderer: "html", editor: false },
                                { data: 'WarehouseNumber', type: 'numeric' },
                                { data: 'PONumber', type: 'text' },
                                { data: 'Ordered', type: 'numeric' },
                                { data: 'Received', type: 'numeric' },
                                { data: 'BackOrdered', type: 'numeric' },
                                { data: 'Make', type: 'text' },
                                { data: 'PartNumber', type: 'text' },
                                { data: 'DateEntered', type: 'date', dateFormat: 'MM/DD/YYYY' },
                                { data: 'DateReceived', type: 'date', dateFormat: 'MM/DD/YYYY' }
                             
                            ],
                            stretchH: 'all',
                            autoWrapRow: true,
                            //height: 342,
                            height: height,
                            colHeaders: [
                                '',
                                'Whse',
                                'PO',
                                'Ordered',
                                'Received',
                                'Back Order',
                                'Make',
                                'Part',                            
                                'Date Entered',
                                'Date Received',
                             
                            ]
                        };

                        hotInquiry = new Handsontable(hotElement, hotSettings);