Comments (19)
I figured out that the issue is caused by the printing styles of bootstrap. Specifically the following line:
@page { size: $print-page-size; }
When i add this to my stylesheet the PDF renders fine.
@media print { @page { size: auto; } }
Hope it helps somebody.
Cheers :)
from mpdf.
This works for me
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
border:0;
padding:0;
margin-left:-0.00001;
}
from mpdf.
Fast Forward 2022, and the problem is now even worse. Tried everything mentioned here on a stylesheet of Bootstrap v3.3.4 and none of them worked. I think I am gonna have to switch to another service to make my pdfs.
from mpdf.
This works for me
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { border:0; padding:0; margin-left:-0.00001; }
This actually worked
from mpdf.
Are you sure that Yii includes layout on $this->render('test');
call and not some time after return from action method?
Does
var_dump($this->render('test'));
die();
produce an entire HTML including layout or only the view portion?
from mpdf.
hi,
- my layout is certificate.php which is as follows
use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\widgets\Breadcrumbs;
use frontend\assets\AppAsset;
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
<meta charset="<?= Yii::$app->charset ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?= Html::csrfMetaTags() ?>
<link rel="stylesheet" href="<?php echo Yii::$app->getUrlManager()->getBaseUrl();?>/css/certificate.css" type='text/css' media='all' />
<link rel='stylesheet' id='zn-bootstrap-responsivecss-css' href="<?php echo Yii::$app->getUrlManager()->getBaseUrl();?>/css/certificate-responsive.css" type='text/css' media='all' />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<?php $this->head() ?>
</head>
<body class="page page-id-2216 page-template-default res1170">
<?php $this->beginBody() ?>
<?php echo $content; ?>
<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>```
and i am quite sure that Yii includes layout on $this->render('test'); call.
2) var_dump($this->render('test'));
die(); this gave me an output like this
```string(1199) "
Heading1 Heading2 "```
from mpdf.
Judging by some simple try/error testing, there are problems with bootstrap coming from pseudo device-width of the document, print media styles and page margins.
col-md-6
class has full page width when used in mPDF document, as col-sm-6
has. The only class getting somewhat correctly resized to 50% is col-xs-6
, but the width is computed from whole page width, not excluding page margins, so the columns are also stacked instead of displayed alongside each other.
I will close this issue now with resolution "bootstrap not supported out-of-the-box". You could use some custom style to make the columns fit when exporting to PDF.
Given some enthusiasm, maybe the community will be able to look into this sometime in the future.
from mpdf.
Bootstrap is external to the default styles for fpdf, which is why classes bootstrap your pdf not work, if you want to customize the look of your pdf need to use a piece of own stylesheets, add after creating your mpdf and use your classes stylesheets. In short bootstrap not work to generate PDF with mpdf.
public function actionPrint_death_certificate1()
{
$this->layout = 'certificate';
$html = $this->render('test');
$stylesheet = file_get_contents('style.css');
require_once(Yii::$app->basePath . "/../vendor/mpdf/mpdf/mpdf.php");
$mpdf = new mPDF();
$mpdf->WriteHTML($stylesheet, 1);
$mpdf->WriteHTML($html);
$mpdf->Output();
}
from mpdf.
Any update on this issue? Bootstrap grid still not supported on mpdf?
I am having the same problem and I really don't want to create a different template just for printing with mpdf, no way to replace all the col-xs-* bootstrap grid with tables.
from mpdf.
Any update on this issue? Bootstrap grid still not supported on mpdf?
from mpdf.
No, bootstrap grid is still not supported and nobody is working on the support.
from mpdf.
Same issue, no clear solutions... maybe with custom stylesheet
from mpdf.
I think i found a workaround
First we Override the bootstrap css (i use a 10px top-margin for the row but this is not necessary) :
.row {
margin: 10px 0px 0px 0px !important;
padding: 0px !important;
}
a then we set the columns like this
<div class="row">
<div class="col-xs-6 col-sm-6">TEST</div>
<div class="col-sm-6">RUT: </b>TEST</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4">TEST</div>
<div class="col-xs-4 col-sm-4">TEST</div>
<div class="col-sm-4">TEST</div>
</div>
from mpdf.
For the most part that helped, not all of my Bootstrap styled HTML is being displayed in the Bootstrap styled grid.
from mpdf.
Reading this, it looks like that an alternative css style for export as pdf is the way to improve the situation. If you can come up with some general recommendations for Bootstrap, I think it is worth a help page at https://mpdf.github.io/
from mpdf.
@synnoc IMHO margin-left:-0.00001;
is useless with no unit specified.
from mpdf.
Still no fix to that?
from mpdf.
which one would that be - dompdf?
from mpdf.
@pfpro It is right in the readme https://github.com/mpdf/mpdf#about-css-support-and-development-state
from mpdf.
Related Issues (20)
- Getting Fatal error sometimes with the ColorConverter HOT 2
- Attribute value truncated when containing double quote character and using single quote delimiter
- Warning: Undefined array key "s" HOT 6
- Nesting a table inside a tfoot element results in "Trying to access array offset on null"
- PDF/A : endobj is missing EOL-Marker
- ArrayAccess::offsetSet()" might add "void" as a native return type
- Error while trying to save pdf to a folder. HOT 1
- Write HTML - NOTICE Uninitialized string offset - XXXX on Otl.php HOT 1
- Subsequent calls to Output() of pdf with images are missing images in 2++ data HOT 1
- SELECT don't show selected element HOT 6
- Signed PDF doesn't show signature
- Font size in absolute positioned div depends on position on page
- MPDF "Trying to access array offset on null" error during pdf generation
- Documentation Update Needed for Margin Property Syntax Change in mPDF Version 8 HOT 1
- Bug Report HOT 1
- Set margin-left and margin-right in @page :first { ... }
- text-align: justify add spases between letters not words
- Fatal error: Uncaught Error: Class "Mpdf\Mpdf" not found in C:\xampp\htdocs\CV Builder\index.php:5 Stack trace: #0 {main} thrown in C:\xampp\htdocs\CV Builder\index.php on line 5
- MPDF 8.2 with PHP 8.1 - cannot suppress PHP notices and warnings HOT 1
- PDF/A-3b support
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mpdf.