MPDF Не отображается правильный CSS - PullRequest
Новая
       35

MPDF Не отображается правильный CSS

0 голосов
/ 09 ноября 2019 

//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>

ссылка на код Я использую mpdf для своего приложения php для создания страниц PDF. Недавно я сгенерировал html-страницу с помощью html-компоновщика методом перетаскивания, который также предоставляет исходный код css. поэтому я скопировал точную CSS на странице, используя. Когда mpdf генерирует PDF, он не показывает css правильно. это похоже на проблемы ширины, но я попытался уменьшить ширину всех элементов div и все еще сталкиваюсь с той же проблемой только с меньшими появляющимися столбцами. пожалуйста помоги. вот как он показывает how it shows и как он должен показывать how it should be

1 Ответ

0 голосов
/ 12 ноября 2019

mPDF имеет ограниченные возможности в обработке плавающих блоков. Используйте таблицу HTML, чтобы убедиться, что она отображается правильно (ваши данные несколько табличны, так что в любом случае это правильно).

...