I'm using jspdf-autotable on angular 4.
The line width is wrong when there is an overflow of content. I will like to use long content on my table but the breakline doesn't work right. What can i do????
There is my source code
doc.autoTable(colonnes, rows, {
theme: 'striped',
styles: {
fillColor: [10, 10, 20],
overflow: 'linebreak',
fontSize: 15,
rowHeight: 20,
columnWidth: 'wrap',
theme: 'striped',// 'striped', 'grid' or 'plain'
startY: false, // false (indicates margin top value) or a number
pageBreak: 'auto', // 'auto', 'avoid' or 'always'
tableWidth: 'wrap', // 'auto', 'wrap' or a number,
showHeader: 'firstPage', // 'everyPage', 'firstPage', 'never',
tableLineColor: 200, // number, array (see color section below)
tableLineWidth: 2,
},
tableWidth: 'auto',
columnWidth: 'auto',
columnStyles: {
id: {fillColor: [15, 15,25]},
//1: {columnWidth: 'auto'},
columnWidth: 'wrap',
},
headerStyles: {theme: 'striped'},
margin: {top: 60},
addPageContent: function(data) {
doc.text(nom + ' Nombre Total : ' + rows.length, 150, 40);
/*fontSize: 25;
fontFamily: 'vivaldi';*/
}
});
doc.save(nom+now+'.pdf');
In columnStyles add 'overflow: '
Possible values for overflow:
overflow: 'linebreak'|'ellipsize'|'visible'|'hidden' = 'normal'
columnStyles = {
columnId: {
overflow: 'ellipsize'
}
}
Related
The text of a column in my table is required to render as HTML but the table can't render it, the following code is the way I'm generating the PDF:
var doc = new jsPDF({ format: 'a4', unit: 'px' });
doc.setFontSize(10);
var alignOption: any = { align: 'left' };
if (company) doc.text(`Company: ${company}`, 10, 15, alignOption);
if (division) doc.text(`Division: ${division}`, 10, 30, alignOption);
autoTable(doc, {
styles: { fontSize: 5 },
columnStyles: { 5: { cellWidth: 200 } },
margin: { top: 40, bottom: 40 },
head: [Object.keys(data[0])],
body: formatedData,
foot: [['total', '500']],
});
doc.save('hourlyReport.pdf');
The following image is the result I get:
Is there a way I can render the marked information as HTML?
I tried to export 15 columns with jsPDF autoTable, but the exported table layout is not readable. How can we achieve it?
In my case I had 10 columns and I changed pdf orientation to 'landscape' and styles. Also, if you have long text in columns you need to enable overflow: 'linebreak'.
Here some code example:
const doc = new jsPDF({ orientation: 'landscape' });
doc.text('Transitions', 5, 12);
doc.autoTable({
showHead: 'firstPage',
columns: // your columns,
body: // your rows,
startY: 18,
styles: { overflow: 'linebreak', cellWidth: 'wrap', cellPadding: 1, fontSize: 6 },
columnStyles: { text: { cellWidth: 'auto' } }
});
if you need to use linebreak for specific column:
doc.autoTable({
showHead: 'firstPage',
columns: // your columns,
body: // your rows,
startY: 18,
styles: { overflow: 'linebreak', cellWidth: 'wrap', cellPadding: 1, fontSize: 6 },
columnStyles: {
someColumnName1: { cellWidth: 'auto' },
someColumnName2: { cellWidth: 'auto' }
}
});
someColumnName1 - this is dataKey from columns.
Please provide your code or jsfiddle, so we can provide better solution.
I'm generating Charjs graphs in rails with wicked_pdf and wkhtmltopdf (ver 0.12.4). i've updated wkhtmltopdf gem from ver 0.12.3.1 to ver 0.12.4 because it uses a lot of RAM memory and takes too much time when generate long PDFs, but charjs graphs worked. Now, with the new version, occurs an error when responsive chart option is set to false:
When set it to true, there is no errors but it does not work, even if the parent block has width and height setting.
i don't know how to solve this with the newest version of wkhtmltopdf and gem downgrade isn't an option.
pls help.
i've tried by setting width and height to the parent container and chartjs canvas, more javascript_delay in wkhtmltpdf, no animations in charjs, onbeforeprint callback with recomended function by charjs doc
html
<div class="canvas-holder" style="width: 800px; height: 1200px;">
<canvas id="real-costs-bar-chart-1" width="800" height="1200" style="width: 800px; height: 1200px;"></canvas>
</div>
charjs code
var ctx = document.getElementById(canvas_id).getContext('2d');
new Chart(ctx, {
type: 'horizontalBar',
data: {
datasets: [{
label: 'Real',
data: data1,
backgroundColor: backgroundColor1,
borderColor: borderColor1,
borderWidth: 1
},
{
label: 'Proyectado',
data: data2,
backgroundColor: backgroundColor2,
borderColor: borderColor2,
borderWidth: 1
}
],
// These labels appear in the legend and in the tooltips when hovering different arcs
labels: labels
},
options:{
title: {
display: true,
text: title,
fontSize: 10,
fontColor: '#00397B',
lineHeight: 3
},
responsive: false,
legend:{
position: 'bottom',
fontSize: 10
},
scales: {
xAxes: [{
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, values) {
return 'USD ' + number_to_cl(value);
}
}
}]
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label =
data.datasets[tooltipItem.datasetIndex].label || '',
value =
data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
if (label) {
label += ': ';
}
label += 'USD ' + number_to_cl(value);
return label;
}
}
}
}
})
wicked_pdf config
pdf = WickedPdf.new.pdf_from_string(
template,
pdf: "Report_#{cost_report_type}", javascript_delay: 2000,
header: { content: header, spacing: 10 },
footer: { center: 'Pagina [page] de [topage]', spacing: 5 },
margin: {
top: 35,
bottom: 15
},
encoding: 'UTF-8',
zoom: 0.8,
orientation: 'Portrait'
)
I'm building a location based iOS app using react-native-maps and react-native-google-places-autocomplete.
In my code, I have the search bar code first and the map code second - this is so the search bar renders on top of the map. The problem is, I can't move the map because the search bar component seems to have a transparent element that takes up the whole screen. When the search bar is removed, I can move the map. How can I have the search bar on top of the map and also move the map.
I welcome alternative/better ways of doing what I'm trying to do.
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Dimensions
} from 'react-native';
import MapView from 'react-native-maps';
var {GooglePlacesAutocomplete} = require('react-native-google-places-autocomplete');
const homePlace = {description: 'Home', geometry: { location: { lat: 42.3969, lng: -71.1224 } }};
const workPlace = {description: 'Work', geometry: { location: { lat: 42.3, lng: -71.1 } }};
var screenWidth = Dimensions.get('window').width;
export default class myapp extends Component {
render() {
return (
<View style={styles.container}>
<MapView
style={styles.map}
initialRegion={{
latitude: 42.3967,
longitude: -71.1223,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}>
<MapView.Marker
coordinate={{
latitude: 42.3967,
longitude: -71.1223
}}/>
</MapView>
<GooglePlacesAutocomplete
placeholder='Search location'
minLength={2}
autoFocus={false}
autoCorrect={false}
listViewDisplayed='auto' // true/false/undefined
fetchDetails={true}
renderDescription={(row) => row.description} // custom description render
onPress={(data, details = null) => { // 'details' is provided when fetchDetails = true
console.log(data)
console.log(details)
}}
getDefaultValue={() => {
return ''; // text input default value
}}
query={{
// available options: https://developers.google.com/places/web-service/autocomplete
key: 'AIzaSyAUYfbKtctkIibOgFnNN2x9Xg9i0sVxlhQ',
language: 'en',
types: 'geocode'
}}
styles={{
description: {
fontWeight: 'bold',
},
predefinedPlacesDescription: {
color: '#1faadb',
},
textInputContainer: {
backgroundColor: 'rgba(0,0,0,0)',
top: 15,
width: screenWidth-10,
borderWidth: 0
},
textInput: {
marginLeft: 0,
marginRight: 0,
height: 38,
color: '#5d5d5d',
fontSize: 16,
borderWidth: 0
},
listView: {
backgroundColor: 'rgba(192,192,192,0.9)',
top: 23
}
}}
currentLocation={true}
currentLocationLabel="Current location"
nearbyPlacesAPI='GooglePlacesSearch'
GoogleReverseGeocodingQuery={{
// available options for GoogleReverseGeocoding API : https://developers.google.com/maps/documentation/geocoding/intro
}}
GooglePlacesSearchQuery={{
// available options for GooglePlacesSearch API : https://developers.google.com/places/web-service/search
rankby: 'distance',
types: 'food'
}}
filterReverseGeocodingByTypes={['locality', 'administrative_area_level_3', 'sublocality', 'administrative_area_level_2', 'administrative_area_level_1']}
// filter the reverse geocoding results by types - ['locality', 'administrative_area_level_3'] if you want to display only cities
predefinedPlaces={[homePlace, workPlace]}
debounce={200}
//renderLeftButton={() => <Image source={require('left-icon')} />}
renderLeftButton={() => <Text></Text> }
renderRightButton={() => <Text></Text> }
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
map: {
left: 0,
right: 0,
top: 0,
bottom: 0,
position: 'absolute'
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('myapp', () => myapp);
Add position styles to the react-native-google-places-autocomplete style property:
styles={{
container:{
position: 'absolute',
top: 0
},
description: {
fontWeight: 'bold',
},
.....
I am using qtip plug in to show balloon conversation on my page. i can load the balloon, but i am not seeing any option to close it automatically after some seconds.
This is how i am using qtip -
$('#ShowBalloon')
.click(function()
{
if($("#content a").data("qtip")) $("#content a").qtip("destroy");
$("#content a").html("") // Set the links HTML to the current opposite corner
.qtip({
content: { text: 'You have 1 new message.' },
position: {
corner: {
tooltip: 'bottomRight',
target: 'topRight'
}
},
show: {
when: false,
ready: true,
effect: { type: 'fade' },
length: 2000
},
hide: { when: 'inactive', delay: 1000 },
style: {
border: {
width: 1,
radius: 7,
color : "#00AFF0"
},
title: { 'color': 'red', 'overflow': 'hidden' },
width: 300,
color:'White',
background: '#00AFF0',
padding: 10,
textAlign: 'center',
tip: true,
}
});
});