I've using mpdf to show photo user in pdf. I've tried to insert new font Poppins to mpdf. I have tried using import from google fonts like #import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');, then I want to change font weight, but the result is same.
Here's the code
<html>
<head>
<style>
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
</style>
</head>
<body style="background-image: url('<?= base_url(); ?>assets/image.png');width:50%;height:10%;background-size:no-repeat;background-size:cover;text-align:center;">
<h2 style="margin-top:550px;width:76%;text-align:center;position:absolute;z-index:200;font-family: 'Poppins', sans-serif;font-weight: 900;"><?= "name"; ?></h2>
</body>
</html>
Do you know how to change font weight or add font family correctly ?
as by mpdf documentation you need to set this up in your controller, here is the snippet I used for RockSalt and PT Caption fonts. Make sure to place the *.ttf files into the corresponding folder, in my case: /assets/_pdf/_fonts
$defaultConfig = (new Mpdf\Config\ConfigVariables())->getDefaults();
$fontDirs = $defaultConfig['fontDir'];
$defaultFontConfig = (new Mpdf\Config\FontVariables())->getDefaults();
$fontData = $defaultFontConfig['fontdata'];
$mpdf = new \Mpdf\Mpdf([
'fontDir' => array_merge($fontDirs, [
$_SERVER['DOCUMENT_ROOT'] . '/assets/_pdf/_fonts',
]),
'fontdata' => $fontData + [
'rocksalt' => [
'R' => 'rocksalt.ttf',
],
'ptsanscaption' => [
'R' => 'ptsanscaption.ttf',
]
],
'default_font' => 'ptsanscaption'
]);
$html=$this->load->view('my_mpdf','',true);
$mpdf->WriteHTML($html);
note: in my view file my_pdf (where I build the html I want to output) in order to see a "pre-view" in the browser (I'm using the same view file for building the pdf and for the preview), I'm applying the fonts using
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=PT+Sans+Caption" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Rock+Salt" />
and css as usual
.title{
font-family: 'Rock Salt', rocksalt;
}
edit: In order to change your font-weights, you follow the same rules. Just copy Poppins-Regular.ttf and Poppins-Bold.ttf (or any other) to you font's folder and add the font variant you wish to the fonts array:
$mpdf = new \Mpdf\Mpdf([
'fontDir' => array_merge($fontDirs, [
$_SERVER['DOCUMENT_ROOT'] . '/assets/_pdf/_fonts',
]),
'fontdata' => $fontData + [
'rocksalt' => [
'R' => 'rocksalt.ttf',
],
'ptsanscaption' => [
'R' => 'ptsanscaption.ttf',
],
'poppins' => [
'B' => 'Poppins-Bold.ttf',
],
'poppins' => [
'R' => 'Poppins-Regular.ttf',
]
],
'default_font' => 'ptsanscaption'
]);
then create a css rule:
.my_style{
font-family: 'Poppins';
color:red;
font-size: 16px;
}
and apply it in the html:
<div class="my_style">
<b>bold text</b>
regular text
</div>
Related
I am going to create a pdf file from HTML using the Barryvdh Laravel package. I need to add a header and footer to each page as this is a multi-page document.
I've looked around a bit and I think that the two links below will help you solve your problem:
1- https://github.com/barryvdh/laravel-snappy/issues/139#issuecomment-369050826
Create a route that renders the html for the header/footer, and pass the full url to that route as option.
$html = view()->make("juiztramp.exporter.pdf.grupos")
->with("provas",$ordens_de_passagem)
->render();
$headerHtml = view()->make('juiztramp.exporter.pdf.header')
->with('nomeEvento', $nomeEvento)
->with('dataEvento', $dataEvento)
->with('localEvento', $localEvento)
->render();
$footerHtml = view()->make('juiztramp.exporter.pdf.footer')
->with('organizacao', $organizacao)
->render();
And later on
$options = [
'orientation' => 'portrait',
'encoding' => 'UTF-8',
'header-html' => $headerHtml,
'footer-html' => $footerHtml,
// further options....
];
return response(
$snappy->getOutputFromHtml($html, $options),
200,
[
'Content-Type' => 'application/pdf',
// 'Content-Disposition' => 'attachment; filename="'.$filename.'"',
'Content-Disposition' => 'filename="'.$filename.'"',
]
);
example header view
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<table>
<tbody>
<tr>
<td style="width: 200px; background-color: #00be67;"> {{ $nomeEvento }} </td>
<td style="width: 500px; background-color: #0a94e3;" align="center"> {{ $localEvento }} </td>
<td style="width: 200px; background-color: #7b3f25" align="right"> {{ $dataEvento }} </td>
</tr>
</tbody>
</table>
</body>
</html>an
I have devanagari script in my html file. But it is displayed as ?????? in the .pdf file. how to solve this problem?
This is the html code
<style>
#font-face {
src: url("/Shivaji01.ttf");
font-family: "Shivaji01";
}
</style>
<p style="text-align:center;font-family:Shivaji01"> फोंडा - गोवा 403401 </p>
and i am getting this error: Undefined index:in \vendor\dompdf\dompdf\lib\Cpdf.php
Are you using the utf8? Which font did you choose? Make sure that the font contains the characters and the document is in the correct encoding.
I hope this helps: dompdf character encoding UTF-8
step 1) add your font's ttf(TrueType font),afm(Adobe Font Metrics) and ufm types in your vendor/dompdf/lib/fonts file.
step2) edit your "dompdf_font_family_cache.dist.php" file. add
'yourFontName' =>
array(
'bold' => $distFontDir . 'yourFontName',
'bold_italic' => $distFontDir . 'yourFontName',
'italic' => $distFontDir . 'yourFontName',
'normal' => $distFontDir . 'yourFontName',
),
step 3) in your css, add
#font-face {
src: url("/PathToyourFont.ttf");
font-family: "yourFontName";
}
step 4) in your css, you can use your font inside font-family
body {
margin-right: 1cm;
margin-left: 1cm;
font-family: "yourFontNamr",Helvetica,Arial,sans-serif;
}
When a user uploads a file to my site i want it to display an image depending on the filetype I.e - png file uploaded it will then display file with the file icon and view button
i have this currently in my Upload model
public function getIconAttribute() {
$extensions = [
'jpg' => 'jpg.png',
'png' => 'png.png',
'pdf' => 'pdf.png',
'doc' => 'doc.png',
];
return array_get($extensions,$this->extension,'unkown.png');
}
and i have this in my view
<img src='../../../public/img/{{ $file->icon }}' style="padding:5px;" class="img-responsive center-block" />
im unsure how to make this work i have the icons in my img folder etc its just getting it to work thats the problem
This can be done rather easily with css attribute selectors.
img[src$=".jpg"]:after{
content: 'jpg';
}
img[src$=".png"]:after{
content: 'png';
}
<img src='img.jpg' style="padding:5px;" class="img-responsive center-block" />
<img src='img.png' style="padding:5px;" class="img-responsive center-block" />
Maybe I'm just missing something but I'm trying to use webdriver and Ruby to enter text into a WYSIWYG. I don't receive any errors but text does not get entered as well.
Here is my code that I wrote
tinymce_frame = driver.find_element(:id => "Speakers_ifr")
driver.switch_to.frame(tinymce_frame)
editor_body = driver.find_element(:css => 'body')
#I also tried replacing 'body' with the line of code below
#editor_body = driver.find_element(:css => "html body#tinymce.mceContentBody")
editor_body.send_keys("BOB")
Here is the HTML from Firebug
<iframe id="Speakers_ifr" frameborder="0" src="javascript:""" allowtransparency="true" title="Rich Text AreaPress ALT-F10 for toolbar. Press ALT-0 for help" style="width: 100%; height: 256px; display: block;">
<!DOCTYPE >
<html>
<head xmlns="http://www.w3.org/1999/xhtml">
<body id="tinymce" class="mceContentBody " contenteditable="true" onload="window.parent.tinyMCE.get('Speakers').onLoad.dispatch();" spellcheck="false" dir="ltr">
<br data-mce-bogus="1">
</body>
Thanks for any suggestions.
Scott
I just needed to add a couple of lines of code.
tinymce_frame = driver.find_element(:id => "Speakers_ifr")
driver.switch_to.default_content # Added this line
driver.switch_to.frame(tinymce_frame)
editor_body = driver.find_element(:tag_name => 'body')
driver.execute_script("arguments[0].innerHTML = 'bob'", editor_body) #Added this line
My next challenge is trying to make 'bob' a variable that is being passed into the function. I'll write that up as another question, if I cannot find it.
I have a problem with Codeigniter URL. I have a controller "welcome.php" :
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Welcome extends CI_Controller {
function __construct()
{
parent::__construct();
}
public function index()
{
$data['tiung'] = 'index';
$this->load->view('welcome_message',$data);
}
public function dor($bus)
{
$data['tiung'] = $bus;
$this->load->view('welcome_message',$data);
}
}
and a view "welcome_message.php" :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to CodeIgniter</title>
</head>
<body>
sesuatu <?php echo $tiung?>
<img src="fragor.jpg" width="720" height="246" alt=""/>
ladalah
</body>
</html>
If I want to access the controller function 'dor' with a parameter I used this :
localhost/hostname/index.php/welcome/dor/something
and it works, but the problem is the image isn't loaded. I tried to put the image file in the webroot folder, 'application' folder, and even in the 'views' folder. But the image still can't load. Where should I put the image file?
The best practice for this is to create an /images/ directory in your webroot (the folder with index.php) and use the base_url() function to get the link to the image, I.E.
<img src="<?php echo base_url('images/fragor.jpg'); ?>" width="720" height="246" alt=""/>
Don't forget to load the url helper either with the autoloader or manually before using site_url() or base_url().
Also if you're using CodeIgniter's rewrite rules to remove the index.php from the URL (which it doesn't look like you're doing), don't forget to exclude the /images/ directory from the rewrite.
In CodeIgniter there is a specific way to indicate an image...like
echo img('images/gautam.gif');
put this in your view file and you need to create "images" folder at your root
Though you have to add CI helper 'html' in autoload config, but this goes easy after.
<?php
$image_properties = array(
'src' => 'images/picture.jpg',
'alt' => 'Me, demonstrating how to eat 4 slices of pizza at one time',
'class' => 'post_images',
'width' => '200',
'height'=> '200',
'title' => 'That was quite a night',
'rel' => 'lightbox'
);
img($image_properties);
?>
/* <img src="site.com/index.php/images/picture.jpg" alt="Me, demonstrating how to eat 4 slices of pizza at one time" class="post_images" width="200" height="200" title="That was quite a nigh`enter code here`t" rel="lightbox" />*/
OR JUST simple:
<?php
echo img('images/picture.jpg'); ?>
// gives <img src="site.com/images/picture.jpg" />