Comments (19)
Ivcho-Varna
commented on May 23, 2024
6
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.
synnoc
commented on May 23, 2024
5
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.
navintanzim
commented on May 23, 2024
3
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.
wimurk
commented on May 23, 2024
1
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.
finwe
commented on May 23, 2024
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.
ajithfort
commented on May 23, 2024
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.
finwe
commented on May 23, 2024
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.
Lizethe
commented on May 23, 2024
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.
fredrabelo
commented on May 23, 2024
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.
developerpratika
commented on May 23, 2024
Any update on this issue? Bootstrap grid still not supported on mpdf?
from mpdf.
finwe
commented on May 23, 2024
No, bootstrap grid is still not supported and nobody is working on the support.
from mpdf.
Blair2004
commented on May 23, 2024
Same issue, no clear solutions... maybe with custom stylesheet
from mpdf.
anguswild
commented on May 23, 2024
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.
talamihg
commented on May 23, 2024
For the most part that helped, not all of my Bootstrap styled HTML is being displayed in the Bootstrap styled grid.
from mpdf.
Klap-in
commented on May 23, 2024
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.
luciash
commented on May 23, 2024
@synnoc IMHO margin-left:-0.00001; is useless with no unit specified.
from mpdf.
SzymonDukla
commented on May 23, 2024
Still no fix to that?
from mpdf.
pfpro
commented on May 23, 2024
which one would that be - dompdf?
from mpdf.
finwe
commented on May 23, 2024
@pfpro It is right in the readme https://github.com/mpdf/mpdf#about-css-support-and-development-state
from mpdf.
Related Issues (20)
- UTF-8 error when I use ctimes HOT 1
- Import external PDF page without overriding all document settings.
- div block width and font-size HOT 1
- Change ! to isset() on line 654 of Mpdf.php to remove warning
- https://www.exploit-db.com/exploits/50995 HOT 1
- Quickfix for color containing CSS variable is bad
- Hyphenation of words with hyphens not as expected HOT 3
- Add security reporting feature to the repo HOT 1
- There are some bugs related to border-collapse and padding and border with tables HOT 3
- Mpdf.php (#16141): Trying to access array offset on value of type null HOT 10
- Adding text to existing PDF file, can not move pdf file
- converting a .xlsx file to .pdf not retain the specified print area
- Undefined array key "VALUE" HOT 1
- htmlpagefooter element does not respect z-index HOT 4
- Error in pdf generation - Invalid argument supplied for foreach()
- Document structure is invalid or damaged HOT 6
- 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"
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.