Any one have any knowledge of froala editor. I ma using it to edit webpage and generate it as a PDF. The HTML template contains a dynamic data, and when I generate a PDF the page break happen between the content, which looks quite bad. Does any one knows how to resolve it?
You could create a custom button and modify the html2pdf plugin inside the callback.
FroalaEditor.DefineIcon('customDownload', {
NAME: 'plus',
SVG_KEY: 'add'
});
FroalaEditor.RegisterCommand('customDownload', {
title: 'Custom Download PDF',
focus: true,
undo: true,
refreshAfterCallback: true,
callback: function() {
var element = this.el;
var opt = {
margin: 1,
filename: 'myfile.pdf',
image: {
type: 'jpeg',
quality: 0.98
},
html2canvas: {
scale: 2
},
jsPDF: {
unit: 'in',
format: 'A4',
orientation: 'portrait'
},
pagebreak: {
mode: 'avoid-all',
before: '#page2el'
}
};
html2pdf(element, opt);
}
});
new FroalaEditor('#selector', {
toolbarButtons: ['customDownload']
});
Related
I'm using following js
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.8.0/html2pdf.bundle.min.js"></script>
and following js code to generate pdf
html2pdf(element, {
margin: 1,
filename: 'myfile.pdf',
image: { type: 'pdf', quality: 1 },
html2canvas: { scale: 1, logging: true, dpi: 300},
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
});
The page is displaying as
[col][col]
but after generating pdf (myfile.pdf)
[col]
[col]
Any solution to resolve this? In both col there is table.
I am using fullcalendar the non-es6 way, quite honestly because the bundled file was so large it was crashing stuff. Anyway, so I have loaded all the js files manually and all is well. Now I am trying to use Draggable. On the docs https://fullcalendar.io/docs/external-dragging it only shows you how to import Draggable from the interaction plugin. I have the interaction plugin up and running as I can drag events around on the calendar no problem, in fact I am editing bookings in Woo Bookings from them as they are dropped. I am now trying to drag resources from outside the calendar into the calendar and create bookings from them. I am getting Plugin file not loaded for draggable error in console, and of course Uncaught ReferenceError: Draggable is not defined
Here is my code
calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
plugins: [ 'resourceTimeline', 'interaction' ],
eventOverlap: false,
resourceGroupField: 'groupID',
resourceGroupText: 'groupText',
defaultView: 'resourceTimelineDay',
nowIndicator: true,
droppable: true,
defaultDate: currDate,
eventRender: function(info) {
$(info.el).find('.fc-content').attr("id", "event-" + info.event.id);
},
eventClick: function(info) {
info.jsEvent.preventDefault();
jQuery.colorbox({
href: wsccAppVars.standardajax,
data: {
action: 'fullcal_get_booking',
booking_id: info.event.id,
resource_id: info.event.resourceId
}
})
},
themeSystem: 'standard',
editable: true,
eventStartEditable: false,
eventDurationEditable: false,
resources: fcresources,
resourceColumns: [{
labelText: 'Lagoon',
field: 'lname'
}, {
labelText: 'Product',
field: 'pname'
}],
eventSources: [{
url: wsccAppVars.adminajax, // use the `url` property
color: 'yellow', // an option!
textColor: 'black' // an option!
}],
eventDrop: function(info) {
//console.log(info);
var data = {
booking_id: info.event.id,
resource_id: info.newResource.id,
protect: $("#calendar").data('cal-protect'),
action: 'wbsc_cal_booking_change'
}
//console.log(data);
$.post(wbscAppVars.standardajax, data, function(response) {
$("#calendar_messages").text(response.return_message)
if (!response.success) {
info.revert();
}
})
}
});
containerEl = document.getElementById('draggable_resources');
new Draggable(containerEl, {
itemSelector: '.draggable_resource'
});
calendar.render();```
I am developing a application in which data is display in kendo grid.Now I want to export this pdf/excel.
For this I create a sample -
http://jsfiddle.net/pporwal26/y6KdK/83/
$("#grid").kendoGrid({
toolbar: ["pdf"],
pdf: {
allPages: true
},
pageable: true,
scrollable: true,
pageable: {
pageSize: 2,
refresh: true,
change: function(e) {
nextData(e.index);
}
},
dataSource: {
serverPaging: true,
schema: {
data: "FileList",
total: "total",
},
data: jsonData
},
});
}
In this sample I have two problems -
export this grid in pdf/excel.
When I click on next page my next page json is come from the function.Si I want that I download pdf with all page data.
Be sure you have referenced JZIP script. You can use this CDN:
src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"
I'm working on taking a html5up template that I really like and put it in rails. I have it all working except for one thing. In the js they have this
skel.init({
reset: 'full',
breakpoints: {
'global': { range: '*', href: 'css/style.css', containers: 1400, grid: { gutters: 40 }, viewport: { scalable: false } },
'wide': { range: '961-1880', href: 'css/style-wide.css', containers: 1200, grid: { gutters: 40 } },
'normal': { range: '961-1620', href: 'css/style-normal.css', containers: 960, grid: { gutters: 40 } },
'narrow': { range: '961-1320', href: 'css/style-narrow.css', containers: '100%', grid: { gutters: 20 } },
'narrower': { range: '-960', href: 'css/style-narrower.css', containers: '100%', grid: { gutters: 15 } },
'mobile': { range: '-736', href: 'css/style-mobile.css', grid: { collapse: true } }
},
Which loads a certain css file depending on what size screen you have. This works fine when its just being loaded using apache but in rails all css gets throw together into an application.css when its in assets/stylesheets which means i wont be able to do anything like this. Is there any way to keep these css files separate and load them dynamically from js like it is here?
Figured it out. i just put in into public and then just referenced it from ../stylesheets/mycss.css
I want to achive lazy loading of tree branches in an MVC application with extjs4.1 where the braches are located on different urls. I have come quite some ways and hit quite some walls, right now it does not branch.
Here is where I fail:
Ext.define('OI.view.tree.Tree' ,{
extend: 'Ext.tree.Panel',
alias : 'widget.treepanel',
store: 'TreeStore',
collapsible: true,
rootVisible: false,
viewConfig: {
plugins: [{
ptype: 'treeviewdragdrop'
}]
},
height: 350,
width: 400,
title: 'Directory Listing',
initComponent: function() {
this.store = Ext.data.StoreManager.lookup(this.store);
this.store.getProxy().url = 'data/level1.json'; // <-- init loading
this.store.load();
this.callParent(arguments);
},
listeners: {
itemclick: function(view, record) {
console.info('ID: '+record.get('id'));
console.info('TEXT: '+record.get('text'));
console.info('PrimType: '+record.get('primaryType'));
console.info(record.fields.getCount());
console.info('JCRPATH: '+record.get('jcrPath'));
var newBranchStore = Ext.create('Ext.data.TreeStore', {
model: 'OI.model.Branch',
autoLoad: true,
proxy: {
type: 'ajax',
reader: {
url: 'data/'+ record.get('jcrPath') +'/level1.json', //<-- load json at the level of the url path returned by the model
type: 'json'
}
},
folderSort: false
});
newBranchStore.load({url: 'data/'+ record.get('jcrPath') +'/level1.json',
callback: function(){
console.log('loaded');
var mynode = newBranchStore.getNodeById('content_mytest');
console.info(mynode.get('id'));
this.store.getNodeById(record.get('id')).appendChild(mynode).expand(); // <-- this does not work
},
scope: this
});
}
}
});
The first level is loaded correctly, however when I trigger a click on the node, I am getting the right json returned from the server, in this case a static json file for debugging, and I try to statically fetch a node and append it to the one that has been clicked. But it is never injected.
What I eventually want to achive is that I can append all children returned by the json file to the node that has been clicked.
Further I am a bit confused about treestores ...
Am I correct when I say that there can be only ONE treestore per tree, right? So I need to attach the new nodes to the original treestore ... I am slightly confused and could need all the pointers I can get.
You are way overcomplicating this, use this approach instead (basically just swap out the url of your store before it loads to the correct url):
Ext.define('OI.view.tree.Tree' ,{
extend: 'Ext.tree.Panel',
alias : 'widget.treepanel',
store: 'TreeStore',
collapsible: true,
rootVisible: false,
viewConfig: {
plugins: [{
ptype: 'treeviewdragdrop'
}]
},
height: 350,
width: 400,
title: 'Directory Listing',
initComponent: function() {
this.store = Ext.data.StoreManager.lookup(this.store);
this.store.getProxy().url = 'data/level1.json'; // <-- init loading
this.store.load();
this.callParent(arguments);
},
listeners: {
beforeload: function(store, operation) {
store.getProxy().url = 'data/'+ operation.node.get('jcrPath') +'/level1.json';
}
}
});