Как сохранить два элемента рядом в PDF с библиотекой mPDF? - PullRequest
Новая
       9

Как сохранить два элемента рядом в PDF с библиотекой mPDF?

0 голосов
/ 04 октября 2018

Я могу хранить два элемента рядом на веб-странице, но не в формате PDF, созданном с помощью mPDF.Первый элемент - это элемент div, а второй - изображение.Я попытался, установив свойства отображения.Но у mPDF есть некоторые ограничения с элементами встроенного блока.Ваша помощь приветствуется.Спасибо.

Структура кода выглядит следующим образом: 

<div>
   <h4><span>Some Text</span></h4>
   <span>Some other text</span>
</div>

<img src="some_url">

PDF создается с помощью вызова функции «WriteHTML» из mPDF.Я передаю весь HTML этой функции для записи HTML в документ.

Ответы [ 3 ]

0 голосов
/ 04 октября 2018

Это сработало для меня.Я добавил встроенные стили, чтобы напрямую применять их в PDF. 

<div style="width: 100%;">
  <div align="left" style="width: 50%;float: left;">
    <h4><span>Some Text</span></h4>
    <span>Some other text</span>
  </div>

  <div align="left" style="width: 50%;float: left;">
    <img src="https://via.placeholder.com/350x150" style="max-width:150px;height:auto"/>
   </div>
</div>
0 голосов
/ 22 апреля 2019

Попробуйте это. Это сработало для меня определенно, это будет полезно для вас.у этого div есть два div, один div сохраняет фоновое изображение, другой имеет текст, попробуйте это. 

 <div style="width:666px; height:450px;position:fixed;margin:0;padding:0;">
<div style="width:332px;margin:0;padding:0;height:100%;float:left;background-position: center;background-repeat: no-repeat;background-image:url(https://via.placeholder.com/350x150);background-size:100px 100px;overflow:auto;background-origin:content-box;position:relative;">
first div</div>
<div style="width:50%;margin:0;padding:0;height:100%;">second div</div>
</div>
0 голосов
/ 04 октября 2018

Попробуйте это. Это поможет вам. 

#inline{width:100%;height:auto;background-color:black;display:flex;}
	.one,.two{width:50%;height:auto;background-color:green;margin:10px;}
  .two img{width:100%;}
<div id="inline">
	<div class="one">	
		<h4><span>Some Text</span></h4>
	   	<span>Some other text</span>
	</div>
	<div class="two">
		<img src="https://via.placeholder.com/350x150" />
	</div>
</div>
...