php - MPDF 不显示正确的 CSS

标签 php html css pdf mpdf 

//this is the code at the page that generates pdf

$string = get_include_contents('pdf/draydocument/index.php');

//print_r($string);
$mpdf=new mPDF();
$mpdf->WriteHTML($string);
$mpdf->SetDisplayMode('fullpage');

$mpdf->Output();

.heading {
  font-family: Montserrat, sans-serif;
}

.body {
  margin-top: 29px;
  padding-top: 0px;
  background-color: #fff;
  font-family: 'Varela Round', sans-serif;
  font-weight: 500;
}

.text-block {
  font-family: Montserrat, sans-serif;
}

.text-block-2 {
  font-size: 25px;
}

.text-field {
  margin-right: -453px;
  padding-right: 0px;
  font-size: 11px;
}

.bold-text {
  display: block;
  margin-right: 1200px;
  border: 1px solid #000;
  border-radius: 9px;
  color: #ffa705;
}

.paragraph {
  width: 60%;
  margin-right: 1200px;
  margin-left: auto;
}

.div-block {
  margin: -144px 0px 1px 1200px;
}

.text-block-3 {
  width: 50%;
  margin-right: 300px;
  margin-left: -600px;
}

.heading-2 {
  margin-top: 200px;
}

.heading-3 {
  width: 40%;
  margin-top: 117px;
  margin-right: 400px;
  margin-left: -32px;
  color: #ffa705;
  font-size: 25px;
}

.grid {
  grid-template-areas: "Area";
}

.columns {
  width: 35%;
  border: 1px none #000;
}

.column {
  border: 1px solid #000;
}

.column-2 {
  border: 1px solid #000;
}

.column-3 {
  border: 1px solid #000;
}

.column-4 {
  border: 1px solid #000;
}

.column-5 {
  border: 1px solid #000;
}

.column-6 {
  border: 1px solid #000;
}

.column-7 {
  border: 1px solid #000;
}

.column-8 {
  border: 1px solid #000;
}

.column-9 {
  border: 1px solid #000;
}

.column-10 {
  border: 1px solid #000;
}

.column-11 {
  border: 1px solid #000;
}

.column-12 {
  border: 1px solid #000;
}

.column-13 {
  padding-left: 0px;
}

.columns-2 {
  padding-right: 0px;
}

.column-14 {
  padding-right: 35px;
}

.column-15 {
  height: auto;
  margin-top: 0px;
}

.columns-3 {
  height: 30px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.column-16 {
  height: 30px;
}

.column-17 {
  height: 30px;
}

.column-18 {
  border: 1px solid #000;
}

.column-19 {
  border: 1px solid #000;
}

.column-20 {
  border: 1px solid #000;
}

.column-21 {
  height: 400px;
  border: 1px solid #000;
}

.column-22 {
  height: 400px;
  border: 1px solid #000;
}

.column-23 {
  height: 400px;
  border: 1px solid #000;
}

.image {
  width: 600px;
}

.div-block-2 {
  width: 60px;
}

.text-block-4 {
  width: 40%;
  margin-left: -600px;
}

.columns-4 {
  width: 35%;
}

.columns-5 {
  width: 35%;
}

.columns-6 {
  width: 35%;
}

.columns-7 {
  width: 35%;
}

.columns-8 {
  width: 35%;
}

.text-block-5 {
  font-size: 10px;
}

.bold-text-2 {
  font-size: 10px;
}

.bold-text-3 {
  font-size: 10px;
}
<!DOCTYPE html>
<!--  This site was created in Webflow. http://www.webflow.com  -->
<!--  Last Published: Fri Nov 08 2019 22:38:51 GMT+0000 (UTC)  -->
<html data-wf-page="5dc492ebb03ec1759b3c5d8c" data-wf-site="5dc492ebb03ec16cc23c5d8b">
<head>
  <meta charset="utf-8">
  <title>Delivery Order</title>
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <meta content="Webflow" name="generator">
<link href="http://freightcube.net/pdf/draydocument/css/normalize.css" rel="stylesheet"/>
<link href="http://freightcube.net/pdf/draydocument/css/webflow.css" rel="stylesheet"/>
  <link href="css/normalize.css" rel="stylesheet" type="text/css">
  <link href="css/webflow.css" rel="stylesheet" type="text/css">
  <link href="css/puneets-blank-site-1bae2e.webflow.css" rel="stylesheet" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
  <script type="text/javascript">WebFont.load({  google: {    families: ["Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic","Varela Round:400"]  }});</script>
  <!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
  <script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
  <link href="" rel="shortcut icon" type="image/x-icon">
  <link href="" rel="apple-touch-icon">
</head>
<body class="body">
  <div class="div-block-2"></div>
  <p class="paragraph">123 E 9TH ST, SUITE 332<br>UPLAND, CA 91786<br>PHONE: 909-285-2370<br>EMAIL: ops@freightcube.net</p>
  <h1 class="heading-3">           DRAYAGE DELIVERY ORDER</h1>
  <div class="columns w-row">
    <div class="column w-col w-col-4">
      <h6>OCEAN CARRIER/SSL :<br>php code</h6>
    </div>
    <div class="column-2 w-col w-col-4">
      <h6>LOCATION/TERMINAL :<br>php code</h6>
    </div>
    <div class="column-3 w-col w-col-4">
      <h6>PORT :<br>php code</h6>
    </div>
  </div>
  <div class="columns-4 w-row">
    <div class="column-4 w-col w-col-4">
      <h6>MASTER BOL :<br>PHP</h6>
    </div>
    <div class="column-5 w-col w-col-4">
      <h6>ARRIVAL DATE/CUT OFF DATE :<br>PHP</h6>
    </div>
    <div class="column-6 w-col w-col-4">
      <h6>TRUCKING COMPANY:<br>PHP</h6>
    </div>
  </div>
  <div class="columns-5 w-row">
    <div class="column-7 w-col w-col-3">
      <h6>CONTAINER :<br>PHP</h6>
    </div>
    <div class="column-8 w-col w-col-3">
      <h6>HOUSE BOL :<br>PHP</h6>
    </div>
    <div class="column-9 w-col w-col-3">
      <h6>ENTRY NO :<br>PHP</h6>
    </div>
    <div class="column-10 w-col w-col-3">
      <h6>CUSTOMER REFERENCE :<br>PHP</h6>
    </div>
  </div>
  <div class="columns-6 w-row">
    <div class="column-11 w-col w-col-6">
      <h6>DELIVERY/PICKUP ADDRESS:<br>PHP</h6>
    </div>
    <div class="column-12 w-col w-col-6">
      <h6>SPECIAL INSTRUCTIONS:<br>PHP</h6>
    </div>
  </div>
  <div class="columns-7 w-row">
    <div class="column-18 w-col w-col-3">
      <h6>NO. OF PKGS</h6>
    </div>
    <div class="column-19 w-col w-col-6">
      <h6>DESCRIPTION OF GOODS</h6>
    </div>
    <div class="column-20 w-col w-col-3">
      <h6>WEIGHT</h6>
    </div>
  </div>
  <div class="columns-8 w-row">
    <div class="column-21 w-col w-col-3">
      <div class="text-block-5"><strong>PHP CODE FOR NO. OF PACKAGES</strong></div>
    </div>
    <div class="column-22 w-col w-col-6">
      <div><strong class="bold-text-2">PHP FOR DISCRIPTION</strong></div>
    </div>
    <div class="column-23 w-col w-col-3">
      <div><strong class="bold-text-3">PHP FOR WEIGHT</strong></div>
    </div>
  </div>
  <h4>RECEIVED IN GOOD ORDER BY :<br>‍</h4>
  <script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.4.1.min.220afd743d.js" type="text/javascript" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="js/webflow.js" type="text/javascript"></script>
  <!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
</body>
</html>

link to code我正在为我的 php 应用程序使用 mpdf 来生成 pdf 页面。我最近使用拖放 html 生成器生成了一个 html 页面，它还提供了带有 css 的源代码。所以我使用 复制了页面上的确切 css。当 mpdf 生成 pdf 时，它没有正确显示 css。它看起来像宽度问题，但我试图减少所有 div 的宽度，但仍然遇到同样的问题，只是出现的列较小。请帮忙。这是它的显示方式 how it shows以及它应该如何显示 how it should be

最佳答案

mPDF 在处理 float block 方面的能力有限。使用 HTML 表格确保其正确显示(您的数据有点表格化，因此无论如何这是正确的做法)。

关于php - MPDF 不显示正确的 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58781680/

上一篇：html - 当存在远程子类时，CSS 能否检测并移动 HTML 元素？

下一篇：javascript - 如何将 css 应用于 textarea 标签内以逗号分隔的文本？ (React.js 元素)

相关文章：

php - 跨页面刷新保存计数器值

javascript - div 背景和边框颜色未显示

c# - 将 ASP.Net 表单数据发布到另一个页面

java - 当 UIWebView(通过 Java)识别出图像上的点击时，如何打开 View Controller ？

html - 显示 : inline-flex has greater height than sibling span 的 Span 元素

html - 缩放图像以匹配段落高度

html - Firefox 和 Chrome 之间的 6px 差异

php - 在 mysqli_fetch_array 中添加依赖于 php IF 语句的 CSS 样式

php - 使用 PDO prepare 和 INSERT 不在数据库中输入表单

php - Codeigniter 中的循环函数

©2024 IT工具网  联系我们