How to change export PDF font size in datatables? - pdf

I have a datatable and i have print button and pdf button.
I can change font size when print page but i can't change font size while exporting pdf file.
{
extend: 'pdfHtml5',
text: 'Save PDF',
exportOptions: {
modifier: {
page: 'current'
}
},
header: true,
title: 'My Table Title',
orientation: 'landscape'
},
{
extend: 'print',
text: 'Print',
customize: function ( win ) {
$(win.document.body)
.css( 'font-size', '15pt' )
$(win.document.body).find( 'table' )
.addClass( 'compact' )
.css( 'font-size', '8pt' );
},
header: false,
title: '',
orientation: 'landscape'
},
can you help me?

If you look at the src of html5.js, it creates a default object literal doc holding default settings :
var doc = {
pageSize: config.pageSize,
pageOrientation: config.orientation,
content: [
{
table: {
headerRows: 1,
body: rows
},
layout: 'noBorders'
}
],
styles: {
tableHeader: {
bold: true,
fontSize: 11,
color: 'white',
fillColor: '#2d4154',
alignment: 'center'
},
tableBodyEven: {},
tableBodyOdd: {
fillColor: '#f3f3f3'
},
tableFooter: {
bold: true,
fontSize: 11,
color: 'white',
fillColor: '#2d4154'
},
title: {
alignment: 'center',
fontSize: 15
},
message: {}
},
defaultStyle: {
fontSize: 10
}
};
You can use the customize callback to change those default settings :
{
extend: 'pdfHtml5',
text: 'Save PDF',
exportOptions: {
modifier: {
page: 'current'
}
},
header: true,
title: 'My Table Title',
orientation: 'landscape',
customize: function(doc) {
doc.defaultStyle.fontSize = 16; //<-- set fontsize to 16 instead of 10
}
},
Changing the header font size:
doc.styles.tableHeader.fontSize = 30
https://jsfiddle.net/2nwqa2jk/12/
Change alignment, set center to all headers, all columns all footers :
doc.defaultStyle.alignment = 'center'
https://jsfiddle.net/2nwqa2jk/13/

Related

ExtJS 4 and display PDF from BLOB

I try to display PDF stream in separate window and this stream is from database BLOB field. My code is the following:
Ext.define('MyApp.view.ViewPDF', {
extend: 'Ext.window.Window',
alias: 'widget.mywindow',
requires: [
'Ext.toolbar.Toolbar',
'Ext.button.Button'
],
config: {
title: '',
source: ''
},
itemId: 'SHOW_PDF',
closable: false,
resizable: true,
modal: true,
onClose: function (clsbtn) {
clsbtn.up('window').destroy();
},
initComponent: function () {
var my = this;
Ext.apply(my, {
items: [
{
xtype: 'panel',
layout: 'fit',
width: 640,
height: 780,
items: [
{
items: {
xtype: 'component',
align: 'stretch',
autoEl: {
tag: 'iframe',
loadMask: 'Creating report...please wait!',
style: 'height: 100%; width: 100%; border: none',
src: 'data:application/pdf;base64,' + tutaj.getSource()
}
}
}
]
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
height: 30,
items: [
'->',
{
xtype: 'button',
baseCls: 'x-btn-default-large',
cls: 'cap-btn',
handler: my.onClose,
width: 55,
margin: '0, 10, 0, 0',
style: 'text-align: center',
text: 'Close'
}
]
}
]
});
my.callParent();
my.title = my.getTitle();
}
});
and it's working only via FireFox browser. In Chrome I can see empty window. So two questions (can't answer myself):
how to correct above to display this PDF stream in other browsers
how to display text in mask because loadMask in code above can't
work; just display text starting with window open and finishing when PDF is displayed
Be so kind as to prompt me what's wrong in this code.
I have created a FIDDLE using filefield, BLOB and FileReader. I have tested in chrome and Fire Fox. I hope this FIDDLE will help you or guid you to solve your problem.
CODE SNIPPET
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
height: window.innerHeight,
title: 'Iframe Example for PDF',
bodyPadding: 10,
items: [{
xtype: 'fileuploadfield',
buttonOnly: true,
buttonText: 'Choose PDF and show via BLOB',
listeners: {
afterrender: function (cmp) {
cmp.fileInputEl.set({
accept: '.pdf'
});
},
change: function (f) {
var file = document.getElementById(f.fileInputEl.id).files[0];
this.up('form').doSetPDF(file);
}
}
}, {
xtype: 'fileuploadfield',
buttonOnly: true,
buttonText: 'Choose PDF and show via BASE64 ',
listeners: {
afterrender: function (cmp) {
cmp.fileInputEl.set({
accept: '.pdf'
});
},
change: function (f) {
var file = document.getElementById(f.fileInputEl.id).files[0];
this.up('form').doSetViaBase64(file);
}
}
}, {
xtype: 'box',
autoEl: {
tag: 'iframe',
loadMask: 'Creating report...please wait!',
width: '100%',
height: '100%'
}
}],
//Show pdf file using BLOB and createObjectURL
doSetPDF: function (file) {
if (file) {
var form = this,
blob, file;
if (Ext.isIE) {
this.doSetViaBase64(file)
} else {
blob = new Blob([file], {
type: 'application/pdf'
}),
file = window.URL.createObjectURL(blob);
form.getEl().query('iframe')[0].src = file;
}
}
},
//Show pdf file using BASE64
doSetViaBase64: function (file) {
var form = this,
reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
form.getEl().query('iframe')[0].src = this.result;
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}
});

Data Table export PDF styling

Does anyone know how you go about styling the PDF generated from the Buttons extension? I specifically just want to td align right.How can I use colspan in datatable?
Thank you
my code is
$('#reporTable').DataTable({
"paging" : false,
"ordering": false,
"info" : false,
"searching" : false,
dom: 'T<"clear">lfrtip',
tableTools: {
"sSwfPath": "/javascripts/js/dataTables/tools/swf/copy_csv_xls_pdf.swf",
"aButtons": [
{
"sExtends": "pdf",
"sTitle": $filename,
"sPdfOrientation": "landscape",
"sPdfMessage": $out_name+":" + msg
},
],
}
});
Here is the example code of it.
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [{
extend: 'pdfHtml5',
title: 'My title' + '\n' + 'a new line',
customize: function(doc) {
doc.styles.title = {
color: 'red',
fontSize: '40',
background: 'blue',
alignment: 'center'
}
doc.styles.tableHeader = {
color: 'red',
background: 'blue',
alignment: 'right'
}
doc.styles.tableBodyEven = {
background: 'yellow',
alignment: 'right'
}
doc.styles.tableBodyOdd = {
background: 'blue',
alignment: 'right'
}
doc.styles.tableFooter = {
background: 'blue',
alignment: 'right'
}
doc.styles['td:nth-child(2)'] = {
width: '100px',
'max-width': '100px'
}
}
}]
})

Setting Colors for Rally Chart with 2.0rc1

I have an app that worked great for 2.0p5. I was able to set the various columns in the chart specific colors. In the chart config, I added
colors: [
'#89A54E',
'#4572A7',
'#AA4643'
],
When I upgraded to 2.0rc1, the colors no longer seem to get set. My chart config is:
Ext.create('Rally.ui.chart.Chart', {
animate: true,
chartData: {
series: [{
type: 'column',
name: 'Data1',
data: data1
},
{
type: 'column',
name: 'Data2',
data: data2
},
{
type: 'column',
name: 'Data3',
data: data3
}],
categories: xAxisData
},
chartConfig: {
chart: {
type: 'column'
},
title: {
text: 'Show Data'
},
yAxis: {
min: 0,
title: {
text: 'yAxis Info'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: 'gray'
}
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
colors: [
'#89A54E',
'#4572A7',
'#AA4643'
],
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: 'white'
}
}
}
}
});
Any ideas why I lost my color setting capabilities in 2.0rc1?
An example from one of my apps:
var series = [{
name : 'Col 1',
data : [],
showInLegend : false
},{
name : 'Col 2',
data : [],
showInLegend : false
},{
name : 'Col 3',
data : [],
showInLegend : false
}];
Ext.Array.each(records, function(record) {
//HighCharts Data
record.set('name', ...);
record.set('y', ...);
record.set('color', ...);
//Add record to series
series[index].data.push(record.data);
// Add to chartData
});
Hope this helps/works for you!

How to change color of bar in column chart in extjs4.1

can anybody tell how to change color of bar in column chart .I have tried with style but its not working
style : {
fill : ['red', 'green'],
width : 30
},
Thanks
Use color renderer function for series onReady method like this on custom example;
Ext.onReady(function () {
var chart = Ext.create('Ext.chart.Chart', {
xtype: 'chart',
animate: true,
style: 'background:#fff',
shadow: false,
store: store1,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Number of Hits',
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Month of the Year'
}],
series: [{
type: 'bar',
axis: 'bottom',
label: {
display: 'insideEnd',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle',
contrast: true
},
xField: 'name',
yField: ['data1'],
//color renderer
renderer: function(sprite, record, attr, index, store) {
var fieldValue = Math.random() * 20 + 10;
var value = (record.get('data1') >> 0) % 5;
var color = ['rgb(213, 70, 121)',
'rgb(44, 153, 201)',
'rgb(146, 6, 157)',
'rgb(49, 149, 0)',
'rgb(249, 153, 0)'][value];
return Ext.apply(attr, {
fill: color
});
}
}]
});
var win = Ext.create('Ext.Window', {
width: 800,
height: 600,
minHeight: 400,
minWidth: 550,
hidden: false,
maximizable: true,
title: 'Bar Renderer',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Save Chart',
handler: function() {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
if(choice == 'yes'){
chart.save({
type: 'image/png'
});
}
});
}
}, {
text: 'Reload Data',
handler: function() {
store1.loadData(generateData());
}
}],
items: chart
});
});
Good Luck!

Panel with borderLayout fill it's parent body

I want to add panel to one of tabs of tabPanel, I use border layout for panel but when i add panel to tab it can't fill it's parent body.
panel code:
var viewport = Ext.create('Ext.panel.Panel', {
layout: {
type: 'border',
padding: 5
},
defaults: {
split: true,
anchor:'100%'
},
id:'viewPort',
width:600,
height:600,
items: [{
region: 'west',
collapsible: true,
title: 'Starts at width 30%',
split: true,
width: '17%',
minWidth: 100,
minHeight: 140,
layout:{
type:'vbox',
align:'stretch'
},
items: [show,treePanel,propGrid]
},tabs]
});
tab code that is parent of panel and when user click on it panel loaded to it dynamically:
var mainTabs = Ext.create('Ext.tab.Panel', {
layout: 'anchor',
id:'mtabs',
defaults: {
split: true,
anchor: '100%'
},
items: [{
title: 'Layout Window',
closeAction: 'hide',
layout: {
type: 'border',
padding: 5
},
//anchor: '100%',
width:600,
height:600,
listeners: {
activate:function (tab) {
}
},
items: [{
region: 'west',
collapsible: true,
title: 'Starts at width 30%',
split: true,
width: '17%',
minWidth: 100,
minHeight: 140,
layout:'vbox',
items: [historyTreePanel,propGrid]
},tabs]
},{
title: 'History',
//xtype:'panel',
width:2000,
height:1024,
html: 'Please Wait...',
id:'history-tab',
layout:'fit',
layout: 'hbox',
default: {
anchor:'100%'
},
//iconCls: 'favorites',
//cls: 'card1',
listeners: {
activate:function (tab) {
if(!flag){
flag = true;
$.getScript("/FleetManagement/js/history/fleethistory.js", function(data, textStatus, jqxhr) {
Ext.getCmp('history-tab').add(viewport);
});
}
}
}
}],
renderTo : Ext.getBody()
});
});
in the above code tab with id:'history-tab' is my mentioned tab.How can i fix this problem?
It seems your code missing some of the components. Your tab should have correct layout. Sample code. jsfiddle example here . Hope this helps
Ext.onReady(function() { var resultsPanel = Ext.create('Ext.Panel',{
frame:false,
border:false,
collapsible:false,
title:'tab main',
layout:'border',
items:[{
region: 'center',
id:'centerPanel',
title:'center',
xtype:'panel',
layout:'fit',
border: true,
items:[{id:'grid',xtype:'panel'}]
},
{
region: 'west',
id:'westPanel',
title:'facets',
xtype:'panel',
width:'15%',
collapseMode: 'mini',
collapsible:true,
autoScroll: true,
border: false,
baseCls:'x-plain',
split: true ,
items:[{id:'facet',xtype:'panel'}]
}
]
}); var subtab = { xtype:'tabpanel',
title:'moretabs',
activeTab: 0,//tabActive,
closable:true,
border:false,
id:'idd',
items: [{border:false,layout: 'fit',cls: 'inner-tab-custom', autoShow:true, id:'sub1-',title: 'nested1',items:[resultsPanel]}] };
var tabPanel = Ext.create('Ext.tab.Panel', {
layout:'fit',
height:200,
msgDisplay: 'block',
//deferredRender:false,
border:false,
items: [subtab]
}).render(Ext.getBody());
});