Hi :) ? I am new user of PDFMake library and i saw how to create a simple watermark like the below :
var docDefinition = {
watermark: { text: "watermark", color: "gray", opacity: 0.3, bold: true, alignment: "right" },
content: [
]
}
What i need
But how can i make the text of it be horizontal instead of diagonal ? Github Issue
I want it to appear horizontal like this :
As you can see in the source code they calculate the angle of the watermark on the basis of the page width and height:
https://github.com/bpampuch/pdfmake/blob/2c02af7d364782c3d9fa43babfd07ca04b08321d/src/Renderer.js#L277
You can contribute to the package by adding this feature to overwrite the angle and creating a merge request for it?
But maybe you can solve your problem in another way. Can you show what you want to achieve with the horizontal watermark?
Finally from version 1.60 onwards we can do this like below :
var docDefinition = {
watermark: { text: 'test watermark', angle: 70 },
content: [
'...'
]
};
You can find more on the documentation here
Related
I've migrated from Highcharts 6.2.0 to latest (8.1.0 ) and found incompatibility since then.
I noticed that this exists since v7.0.0.
I can't handle the fontSize of YAxis and the label text of the xAxis.
Working scenario v6.2.0
Unworking scenario v7.0.0+
Basically what I do in this example :
yAxis : display font-size as 4px (ugly of course but to be sure we see the difference b/w working and not working)
xAxis : change the text be displaying for example only the first 3 characters of the label. In my real scenario I have a graphic showing flaticons as label and flaticons+text in table (graphic data are based on table to be generated) and so in the export I'd like to see only the text as I got issue with html flaticons to be rendered in the reporting.
Based on highchart's doc, I don't understand what I'm doing wrong....unless doc hasn't been updated and this functionality (to customize our axis) is not gone.
I'm using Chrome/FF and no highchart export server.
Thanks for your help.
Thank you for sharing it.
It seems like a regression. I reported it on the Highcharts Github issue channel.
Please follow this thread here: https://github.com/highcharts/highcharts/issues/13492
If you need a temporary workaround - ask in the comment under the above link. The core developers should respond to you soon after.
EDIT
As a temporary workaround enable these options in the load callback and trigger the axes updates.
Demo: https://jsfiddle.net/BlackLabel/cprbz1ym/
chart: {
type: 'area',
events: {
load() {
if (this.renderer.forExport) {
this.yAxis[0].update({
labels: {
style: {
fontSize: '4px'
}
},
title: {
style: {
fontSize: '4px'
}
}
});
this.xAxis[0].update({
labels: {
style: {
fontSize: '4px'
},
formatter: function() {
return this.value.substring(0, 2);
}
}
})
}
}
}
},
API: https://api.highcharts.com/class-reference/Highcharts.Axis#update
The space for xAxis generally is rendered dynamically by the Highcharts library and add the ellipsis in the correct place, making it display from the start and cutting it when it stop displaying it on the graph with some ellipsis.
When I try to change that space to not render dynamically, the property marginBottom does it,but it stops picking up when the text should start displaying and the start of the text is cutted from the down of the graph. Is there a way to render correctly the text at the bottom from the highcharts? I Do need it to be rotate 270 degrees, and not let the auto rotate work, and don't want to collapse more part of the graph just for displaying the text.
Here is a sample when that happes:
Highcharts.chart('container', {
chart: {
height: 350,
spacingBottom: 0,
marginBottom: 50,
type: "column"
},
series: [{
name: 'Total',
data: [1,2,3,4,5]
}],
xAxis: {
categories: ["very long name to test if the characters are rigth and cropped",
"Not so long but long enough", "I still am long and out of the screen",
"lets see how is cropped", "cropped", "crop"],
labels: {
rotation: 270
}
}
});
Sample fiddle with marginBottom : https://jsfiddle.net/ragmar/6ru4hze3/
If you remove the marginBottom, even the legend move down a bit.
It is possible to do this behavior? even including some css?
Thanks in advance
To make it work the way you want, you have to make some modifications in Highcharts core. For example you can do not use marginBottom option, but set fixed value as a commonWidth variable in renderUnsquish method:
if (attr.rotation) {
commonWidth = (
maxLabelLength > chart.chartHeight * 0.5 ?
40 : // changed from 'chart.chartHeight * 0.33'
maxLabelLength
);
if (!textOverflowOption) {
commonTextOverflow = 'ellipsis';
}
}
Live demo: https://jsfiddle.net/BlackLabel/moL1tw6c/
i have a question to jsPDF autotable.
My Code:
$('#printBtn').on('click', function() {
var pdf = new jsPDF('p', 'pt', 'a4');
var res = pdf.autoTableHtmlToJson(document.getElementById("tablePrint"));
pdf.autoTable(res.columns, res.data, {
theme : 'plain',
styles: {
fontSize: 12
},
showHeader: 'never',
createdCell: function(cell, data) {
var tdElement = cell.raw;
if (tdElement.classList.contains('hrow')) {
cell.styles.fontStyle = 'bold';
}
}
});
pdf.save("test.pdf");
});
I want add Text before and after the Table from a div.
I have found this Code Snippet in jsPDF autotable examples:
var before = "text before";
pdf.text(before, 14, 30);
This code works good. I have insert that before pdf.autoTable(...});.
But i dont know what the number 14 and 30 for?
Then i have the code insert after the pdf.autoTable function call and the Text printed on the last page of pdf but on the top of the page, not on the end, why?
Sorry for my bad englisch.
Thanks for help.
If what you want is to add something before you must first move the table that you are adding with autotable, you achieve this by adding a startY: 150 attribute within doc.autotable:
pdf.autoTable(res.columns, res.data, {
theme : 'plain',
styles: {
fontSize: 12
},
startY: 150,
showHeader: 'never',
createdCell: function(cell, data) {
var tdElement = cell.raw;
if (tdElement.classList.contains('hrow')) {
cell.styles.fontStyle = 'bold';
}
}
});
150 is the value in pixels you want to move. Above this you can place the text you want with the code you placed.
var before = "text before";
pdf.text(before, 14, 30);
Now the values of 14 (Value in Y) and 30 (Value in Y) are the values that you want the text to move in pixels.
In order for you to add text after the table you must first obtain in which number of pixels your table ended and from there enter the text you want.
let finalY = pdf.previousAutoTable.finalY; //this gives you the value of the end-y-axis-position of the previous autotable.
pdf.text("Text to be shown relative to the table", 12, finalY + 10); //you use the variable and add the number of pixels you want it to move.
Here's my stab at an answer:
So this is your Autotable's function call:
var pdf = new jsPDF('p', 'pt', 'a4');
Since jsPDF Autotables is based on jsPDF, you'll have to go here:
pt is a unit of measurement called points, so 14 and 30 are points. At the first position, 14, moves elements left and right. The second position, 30, moves elements down and up. I'm guessing they're like pixels(px). Seems like you have to move your text to your desired locations by using points.
An idea that helped me is to placing a Table with no content on the position where you would like to add the new table.
autoTable(doc, {
body: [],
startY: finalY + bias
});
I'm using Angular UI Grid and I've tried to few ways to add an image (logo) to the top of the PDF document which gets exported.
I've had no luck with the implementations I've tried...
exporterPdfHeader: { text: "My Header", image: "<urlOfImage>" }
exporterPdfHeader: { text: "My Header", backgroundImage: "<urlOfImage>" }
exporterPdfHeader: { text: "My Header", backgroundImage: url("<urlOfImage>") }
Is this even possible to do?
Thanks in advance.
Can you add your image inside a custom html header using headerTemplate: 'header-template.html', in grid-options?
See example ui-grid tutorial
edit
OK, having looked at the source and docs for the export, there is nothing there about passing images in the header.
It does refer you to pdfMake
Images
This is simple. Just use the { image: '...' } node type.
JPEG and PNG formats are supported.
var docDefinition = {
content: [
{ // you'll most often use dataURI images on the browser side // if no width/height/fit is provided, the original size will be used image: 'data:image/jpeg;base64,...encodedContent...' },
{ // if you specify width, image will scale proportionally image: 'data:image/jpeg;base64,...encodedContent...', width: 150 },
{ // if you specify both width and height - image will be stretched image: 'data:image/jpeg;base64,...encodedContent...', width: 150, height: 150 },
{ // you can also fit the image inside a rectangle image: 'data:image/jpeg;base64,...encodedContent...', fit: [100, 100] },
{ // if you reuse the same image in multiple nodes, // you should put it to to images dictionary and reference it by name image: 'mySuperImage' },
{ // under NodeJS (or in case you use virtual file system provided by pdfmake) // you can also pass file names here image: 'myImageDictionary/image1.jpg' } ],
images: {
mySuperImage: 'data:image/jpeg;base64,...content...' } }
end of quote
So it looks like you were close.
Can you try a relative path from the root of your website wrapped in single quotes.
Had to write a custom export function to add page margins.
Plnkr
$scope.export = function() {
var exportColumnHeaders = uiGridExporterService.getColumnHeaders($scope.gridApi.grid, uiGridExporterConstants.ALL);
var exportData = uiGridExporterService.getData($scope.gridApi.grid, uiGridExporterConstants.ALL, uiGridExporterConstants.ALL, true);
var docDefinition = uiGridExporterService.prepareAsPdf($scope.gridApi.grid, exportColumnHeaders, exportData);
docDefinition.pageMargins = [40, 80, 40, 60];
if (uiGridExporterService.isIE() || navigator.appVersion.indexOf("Edge") !== -1) {
uiGridExporterService.downloadPDF($scope.gridOptions.exporterPdfFilename, docDefinition);
} else {
pdfMake.createPdf(docDefinition).open();
}
}
Image has to be provided as base 64 encoded, unless using Node.js (as per pdfmake library).
Otherwise, you may need to use a JavaScript function to download and convert an image to base 64.
References:
https://stackoverflow.com/a/37058202/2808230
pdfExport function in http://ui-grid.info/release/ui-grid.js
Found this as I was writing up this answer: Angular UI Grid - Exporting an image to a pdf
I need to know if it's possible to add some text (note/detail) on a specific point, in addition to the tooltip.
I use HighCharts Version 3.0.9.
Actually I use a click event on a points to show a popup detail in html . But i want to know if there is a native solution with HighCharts.
Like :
[
{
x: 11,
y: 11,
note: {
text: "Some text",
}
},
{
x: 16,
y: 17
}
]
Sure, it's possible. You have two options:
write your own tooltip.formatter, to get that value
use tooltip.pointFormat to create pattern for points
Second example (easier): http://jsfiddle.net/mPb4A/
tooltip: {
pointFormat: '{series.name}: <b>{point.y}: {point.options.note.text}</b><br/>'
},
Only limitation of second solution is that each point requires note property, otherwise you will get error in JS saying that Cannot read property 'text' of undefined.