I'm using wicked_pdf in Ruby-on-Rails to generate a PDF and I want to set a background image on the body element. I've linked a stylesheet with stylesheet_link_tag wicked_pdf_asset_base64("pdf.css") and now I want to import the image as base64 (linking to the image file to save looking at the code inline).
Sass code:
body
background: asset-url('pdf-background.png')
It works in debug mode but not rendered as a PDF.
body
background: asset-data-url('pdf-background.png')
Thanks to #pbrueske https://stackoverflow.com/a/30187719/203915
Related
I have included my Boostrapmin and bootstrap icon CSS as well.
<i class="bi bi-play-circle"></i>
this icon I am trying to use. but it appears as square. css is applied I can see it in inspect element of google chrome.
I have included my Boostrapmin and bootstrap icon CSS as well.
<i class="bi bi-play-circle"></i>
this icon I am trying to use. but it appears as square. css is applied I can see it in inspect element of google chrome.
So, Here I am writing a solution Thanks to #zim for help.
Step1:
Download Bootstrap icon CSS file, bootstrap-icons.css
Link it in your project
--By including in CSS file
OR
--By linking in HTML file.
After that download the fonts folder from the Bootstrap icons git repository.
--Now open bootstrap-icons.css
And you will find code like this
#font-face {
font-family: "bootstrap-icons";
src: url("../fonts/bootstrapfonts/bootstrap-icons.woff2") //Match this file path format("woff2"),
url("../fonts/bootstrapfonts/bootstrap-icons.woff") //Match this file pathformat("woff");
}
-bootstrap-icons.woff2 and bootstrap-icons.woff make sure you link it properly with bootstrap-icons.css file.
And boom you are good to go.. :)
I am using TCPDF to generate a 2 page pdf document.
I have added a header and a footer to the document. The text part of the header and footer shows up correctly on each page however when I include an image logo in the header it is only showing up on the first page.
public function Header()
{
$this->Image('/home/xxxxxx/public_html/xxxxxxxx/uploads/logo/logo.png',10,6,0,13);
$this->SetFont('helvetica','B',20);
$this->Cell(80);
$this->Cell(0,0, $project->name . ' - Project Plan',$frame,0,'R');
$this->Ln(8);
$this->SetFont('helvetica','',10);
$this->Cell(0,0, $organisation->name,$frame,0,'R');
$this->Ln(10);
}
Does anyone have any idea what I am doing wrong here?
Thanks
I think is not related to header/footer, but I think TCPDF has bug that broken Image function with same image file loaded multiple times as reported here TCPDF - image displayed only once
bug also present on actual version tecnickcom/tcpdf:6.2.26
I resolve this problem by loading image outside and pass to the function as string.
public function Header()
{
$this->Image('#'.file_get_contents('/home/xxxxxx/public_html/xxxxxxxx/uploads/logo/logo.png'),10,6,0,13);
$this->SetFont('helvetica','B',20);
$this->Cell(80);
$this->Cell(0,0, $project->name . ' - Project Plan',$frame,0,'R');
$this->Ln(8);
$this->SetFont('helvetica','',10);
$this->Cell(0,0, $organisation->name,$frame,0,'R');
$this->Ln(10);
}
As said it is a tcpdf bug. In my case I had two logos in header one png and the other jpg. The problem happened only with the .png. Changing the image type from png to jpg solved the issue.
I solved this by using base64 encoded string like this:
$image = base64_encode(file_get_contents('path_to_image'));
Then you can use it like this:
<img src="#<?= $image ?>" />
example repo https://github.com/github0013/typescript_react
I need to load images in base64 string embeded into tag, but importing image files will raise this error.
TS2307: Cannot find module './Octocat.jpg'.
https://github.com/github0013/typescript_react/commit/6670f3ca74404007ad1ed6e4ab0d111f547ee75d
I am still new to typescript, webpack and react, and I am sure I am confused typescript's import and webpack's.
How do I enable url-loader for images? and is this even valid?
https://github.com/github0013/typescript_react/blob/master/config/webpack/environment.js
--
I did try require but it will just return image's path instead of base64 stirng.
// global.d.ts
declare function require(string): string;
solved..
webpacker 3.0.2 already had loaders for image files
https://github.com/rails/webpacker/tree/v3.0.2/package/loaders
https://github.com/rails/webpacker/blob/v3.0.2/package/loaders/file.js
environment.loaders, in rails' config/webpack/environment.js, is just a map, and jpeg png gif are in file loader.
https://github.com/github0013/typescript_react/commit/dc97c3aa9f17bc4f3b0210a426aac27092c5ae7f#diff-41713e6b116dc5cc2bbea556a85db322R3
so overriding file loader's test, then add own image loader will use url-loader for jpeg png gif
https://github.com/github0013/typescript_react/commit/dc97c3aa9f17bc4f3b0210a426aac27092c5ae7f
after adding the loader, regular image require in typescript will return base64 string.
I want to render a signature in a pdf.
my html code:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path stroke="navy" stroke-width="2" fill="none" d="<%= #image %>"/>
</svg>
#image = "M96,8 L96,9 L96,11 L96,14 L98,18 L101,22 L115,32 L126,43
L142,50 L165,56 L189,56 L207,56 L219,50 L230,46 L233,43 L235,41
L236,40 L238,39 L239,39"
how can I render this in pdf?
im using rails 3 + prawn.
OR how can i create with #image an png?
any advice?
I am not familiar with ruby on rails or prawn but if you look at the Graphics section of the PDF spec, specifically in the path section it shows how the commands are laid out.
You could potentially use this info to map from the SVG draw commands to the postscript/pdf draw commands.
A question that might help: How to insert a SVG file in a PDF document?
You can use the wicked_pdf gem which renders HTML and JavaScript into a PDF file. It uses the wkhtmltopdf lib.
To convert to PNG I would recommend the IMGKit gem, which uses wkhtmltoimage lib.
You can use https://github.com/mogest/prawn-svg
Can't confirm if it works, but as I needed to do the same as you.
I've found that after a simple google research I found this plugin.
I will test it as soon as I can.
Kind regards
When you insert an image into a TWebBrowser in edit mode, how do you get the filepath of the inserted image? When an image is inserted it includes the full path to the image in the html source, but in my case I need to modify the html source to only include the filename.
EDIT:
This is the html source after the image is inserted:
<IMG border=0 hspace=0 alt=delphi align=baseline
src="C:\Images\delphi.bmp">
I need to change
<IMG border=0 hspace=0 alt=delphi align=baseline
src="C:\Images\delphi.bmp">
to
<IMG border=0 hspace=0 alt=delphi align=baseline
src="HTML\delphi.bmp">
Yes I can get the path from the html but I'd like to try to copy the image file to the HTML folder then change the path to the HTML folder after the image is inserted without parsing the html. If the filepath can be obtained after the image is inserted I can add the code to copy the file to the HTML folder so that the image appears in the webbrowser with the new path...
Have you tried using the browser's DOM interfaces to read the src attribute and update it to what you want? Specifically, look at the src property of the IHTMLImgElement interface.