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
Related
I have a html div with some img src url inside it. The img part looks like this:
<div><img src="https://www.example.com//cover.png"></div>
I'm using jsPDF to generate the pdf:
new jsPDF('p', 'pt', 'a4', true).html(
document.getElementById('printDiv'),
{
filename: 'print.pdf',
image: { quality: 10, type: 'png' },
html2canvas: {
/*
scale: 2,
*/
},
callback: function (doc) {
doc.save();
},
}
However, it looks like the img only on the first page is not be showing. I guess img loading takes some time and happened after first page render done, I detected it by using html2canvas scale 2 so that the image pushed into 2nd page.
How can I fix the code to let the image on the first page being generated before pdf is rendered?
Wait with the jsPDF call until the image has loaded.
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
I tried this library. angular-modal-gallery. doc
Problem is when popup image, it's showing in small size and initial size also too samall. I want to show image in large size.Similar to this site examples
https://www.jqueryscript.net/demo/Gallery-Popup-jQuery-Fs-Gal/
Please tell me any method to do this.
Here is the code I used in angular-modal-gallery library.
html code
<ks-modal-gallery *ngIf="stuf.itemType == 0" [id]="1" [modalImages]="getImage(stuf.itemId)"></ks-modal-gallery>
typescript code
import { Image } from 'angular-modal-gallery';
images: Image[];
ingleImage: Image[];
getImage(url: string) {
this.images = [
new Image(
0,
{ // modal
img: this.baseUrl + 'Upload/Photos/' + url + '.jpg',
extUrl: 'http://www.google.com'
}
)];
return this.singleImage = [this.images[0]];
}
I'm using html2pdf that creates pdf from html code. It uses html2canvas and jsPDF. The result is very good but slightly different from the original: the font-size and line-height are a little bit different so that the end of the page is not correct. I really need a copy if the div (that has fixed aspect to be correctly rendered on A4 pages).
Is there a way to influence the fonts in the final rendering? The way I produce pdf now is:
savePdf () {
this.pdfDialog = true
let opt = {
// if set firefox will not be able to print as pdf!...
// margin: 0,
filename: 'cv.pdf',
enableLinks: true,
image: { type: 'jpeg', quality: 0.98 },
html2canvas: {
scale: 8,
useCORS: true,
width: 310,
letterRendering: true,
},
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
}
html2pdf().set(opt).from(document.getElementById('printable-cv')).save()]
},
The solution is to add inline styles to the elements. In my case, working in vuejs I ended up with this code:
<div class="presentazione" v-html="presentation" :style="presentationFont"></div>
I have a listview that displays a list of userdetails on right and profile pic on left which I get from back end. For downloading and loading the image I'm using a webviewsample image class from github and it works fine. Now I'm need to make the image round. As I searched through web I understand nine slicing is used to do this but I'm not sure how. Each of my listitem has a different background which changes randomly. Below are the sample image of what I have done and what I actually want.
This is my current list view
This is how I need it to be
This is the code of my custom list item that displays this view
Container {
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
layout: StackLayout {
orientation: LayoutOrientation.LeftToRight
}
Container {
id:profileSubContainer
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
layout: DockLayout {
}
WebImageView {
id: profilePic
url: profilePicture
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
scalingMethod: ScalingMethod.AspectFit
visible: (profilePic.loading == 1.0)
}
ImageView {
id: defaultPic
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
scalingMethod: ScalingMethod.AspectFit
imageSource: "asset:///Images/defaultProfile.png"
visible:!profilePic.visible
}
layoutProperties: StackLayoutProperties
{
spaceQuota: 1
}
}
CustomButtonTextArea {
id: userName
layoutProperties: StackLayoutProperties {
spaceQuota: 2
}
text: username
textEditable: false
textAreaStyle: getStyle()
}
}
If you have older version of Qt where this isn't supported directly, a rather hackish way to do is this :
Cut out a circular hole from the background image (Using Photoshop/GIMP etc.) and save it as a PNG.
Now all you need to do is to arrange all the elements in such a way that it appears as if the profile pic has been cut out. If you place your profile pic first and then the background image, background image cover the profile pic, leaving only circular part from it visible (Note that it SHOULD be PNG for this to work).
Correct order will be :
a. Profile Image
b. Background Image
c. Text
You can either write these elements in that order or use the z value of elements.
Image // Background Image
{
z = 2;
}
Image // Profile Image
{
z = 1;
}
Text
{
z = 3;
}
P.S. This is pseudo code, I hope you get the idea. I did something like this with qt 4.8 long back, and it worked liked a charm.
Edit 1.
In case you want to have background of random color instead of images (as you have asked in the comment), you can try to do this using Qt.
Create the custom background with using QPainter or some similar class and some clipping mask to carve out the circular part.
Expose this class as a Qml element.
Use it for your case by passing random colors while drawing.
They talk of something similar here : http://qt-project.org/forums/viewthread/2066
P.S. Haven't tried it myself, but looks like a good direction if you are stuck otherwise.
If you can't use OpacityMask because your version of Qt doesn't support QtGraphicalEffects, you could do the same trick with Canvas, that is supported since Qt 5.0.
Rectangle{
id: root
width: 400
height: 400
color: "gray"
property string imageUrl: "./rabbid.jpg"
Canvas{
anchors{
fill: parent
margins: 50
}
Component.onCompleted:{
loadImage(imageUrl); // Ready to be used in onPaint handler
}
onPaint:{
console.log("Painting...");
var context = getContext("2d");
context.save();
context.fillStyle = "black";
context.arc(width/2, height/2, width/2, height/2, width);
context.fill();
context.globalCompositeOperation = "source-in";
context.drawImage(root.imageUrl, 0, 0, width, height);
context.restore();
}
}
}
The result:
Since Context.globalCompositeOperation = "source-in" is set, context operations will be done inside previous drawings. Take a look to Context2D for more info, and here for a graphical explanation of composite operations.