While converting HTML field to PFD images table Present in HTML field r not getting converted to PDF

Vishwanath5 · ‎07-07-2023

While converting HTML field to PFD images, tables, alignments, bold words, line and page break Present in HTML field are not getting converted to PDF is there any way we can convert this to PDF without loosing format.

HTML code

<div class="panel panel-default">
<div class="panel-heading clearfix" style = "background-color :#dcafff !important";>
<span class=" pull-left" style="font-size: 24px !important;">Announcements</span>

</div>
<div class="panel-body" style = "height: 500px !important";>
<div class="table" ng-repeat="anounce in anounces">
<h4 href='' style = "color: black" ><a ng-click="c.openModal(anounce.sys_id)">{{anounce.anouncement_title}}</a></h4>
<b>{{anounce.anouncedate}}</b>
<br>
<div class="dividersplit"></div>
</div>
</div>
</div>

</div>
</div>
</div>

<script type="text/ng-template" id="wd-modalnew">
<div class="panel panel-default" style = "width: 175%; margin-left: -215px;" >
<div class="panel-heading clearfix" style = "background-color :#eeeeee !important; font-size: 24px !important; font-weight: 600;">Announcement
<button style="font-size:24px; float: right;" title ="Close" ng-click="c.closex()" > <i class="fa fa-times" aria-hidden="true"> </i> </button>
<a style = "float: right;" target="_new" title ="Download PDF" href="/{{data.anounce1.table}}.do?PDF&sys_id={{data.anounce1.sys_id}}&sysparm_view=download_pdf">
<button style="font-size:24px"> <i class="fa fa-download"></i> </button>
</a>
</div>
<div class="panel-body">
<h4 style = "color: #a100ff; font-weight: 600;">{{data.anounce1.anouncement_title}}</h4>
<b>{{data.anounce1.anouncedate}}</b>
<br>
<div ng-bind-html = "data.anounce1.anouncedetails"> </div>
</div>
<div class="panel-footer clearfix">
<button class="btn btn-primary pull-right" style="margin-right : 15px;" ng-click="c.closeModal()">Close</button>
</div>
</div>
</script>

Client Script

api.controller=function($scope,$sce, $http, $uibModal,$timeout,$interval,spUtil) {

/* widget controller */

var c = this;

c.show = false;

c.exportTypes = [

'PDF','XLS', 'XML'

];

c.exportTo = function(item){

// console.log('/'+c.data.table+'_list.do?' + item + '&sysparm_query='+c.data.query + '&sysparm_record_count=500&sysparm_orderby='+ c.data.orderby);

c.show = !c.show;

$window.open('/'+c.data.table+'_list.do?' + item + '&sysparm_query='+querry , '_blank');

};

$scope.$on('query_set',function(e,d){

//console.log(c.data.query);

c.data.query = d.query;

});

$scope.anounces = c.data.anounces;

c.openModal = function(e){

c.data.action="load-wd";

c.data.reordId=e;

c.server.update().then(function(res){

//alert(JSON.stringify(c.data.anounce1));

c.modalInstance = $uibModal.open({

templateUrl : 'wd-modalnew',

scope : $scope,

backdrop : 'static',

keyboard : false

});

};

c.closex = function(){

c.modalInstance.close();

return;

};

c.closeModal = function(){

c.modalInstance.close();

return;

};

Server Script

(function() {

data.page_value = $sp.getParameter("id");

data.source= ['myclass1','myclass1', 'myclass1','myclass1','myclass1', 'myclass1','myclass1','myclass1'];

//data.doc_wd_ann = $sp.getWidget('support_anounce_model');

data.anounces=[];

var gr = new GlideRecord('u_support_2_0_anouncement');

gr.addEncodedQuery('u_active=true');

gr.orderByDesc('u_date_to_sort');

gr.query();

var count = gr.getRowCount();

while(gr.next()){

var sys = gr.getDisplayValue("sys_id");

var anounce =

{

'anouncement_title':gr.getDisplayValue('u_anouncement_title'),

'sys_id' : gr.getDisplayValue("sys_id"),

'anouncedetails': gr.getValue('u_anouncement_details'),

'anouncedate': gr.getValue('u_anouncement_date')

};

data.anounces.push(anounce);

//gs.addInfoMessage(JSON.stringify(anounce));

}

if(input && input.action == 'load-wd'){

var v = new sn_pdfgeneratorutils.PDFGenerationAPI();

gr.addEncodedQuery('sys_id='+input.reordId+'');

var querry = gr.addEncodedQuery('sys_id='+input.reordId+'');

gr.query();

while(gr.next()){

data.anounce1 =

{

'table' : 'u_support_2_0_anouncement',

'anouncement_title':gr.getDisplayValue('u_anouncement_title'),

'u_test_field':gr.getDisplayValue('u_test_field'),

'anouncedate': gr.getValue('u_anouncement_date'),

'sys_id' :gr.getDisplayValue("sys_id"),

'anouncedetails': gr.getValue('u_anouncement_details')

};

}

})();

screen shots

portal popup model screenshot

PDF screenshot

Backend HTML field on table screenshot

@Ankur Bawiskar @Pradeep Sharma @Allen Andreas @Anurag Tripathi