MPDF 使用攻略（如何使用图片，表格）

官方英文手册>>地址

安装使用

//通过官方composer引入
$ composer requrie mpdf/mpdf

//简易用法
<?php
require_once __DIR__ . '/vendor/autoload.php';
$mpdf = new \Mpdf\Mpdf();
$mpdf->WriteHTML('<h1>Hello world!</h1>'); //写入html代码
$mpdf->Output(); //输出 pdf文档

样式问题

虽然mpdf支持绝大部分的css样式，但是还是有一些常用的样式支持的不太友好，比如浮动和定位

文字和一些基本的样式我不再赘述，这里主要讲一下如何实现以下几种情况

列表

通常我们在HTML中使用列表的方式无非是 ul 和 li ，但是当我们使用横排列表时，是需要使用到浮动的属性，但是浮动并不是那么友好，所以这里我建议使用表格，使用表格时注意要在tr的style加上height属性。

右浮动

在html可以随意使用向右浮动，但是在mpdf中不行，所以我们用文本右对齐的方式或者使用pading-left来实现有浮动效果，因为大多都是生成固定大小pdf，所以也不用担心页面的自适应问题，只要我们的样式在A4纸上没有问题就可以了

图片

在mpdf中使用图片是个大问题，不能浮动，不能随意的当背景，不能定位，总之图片不能随意使用
解决方案有三种

1.使用图片水印

$mpdf->SetWatermarkImage('../images/background.jpg');
$mpdf->showWatermarkImage = true;

缺点是当pdf大于一张时，图片会在每一张pdf的同样位置显示

2.使用mpdf中提供的Image()方法，使用方式：

$mpdf->Image('files/images/frontcover.jpg', 0, 0, 210, 297, 'jpg', '', true, false);

3.使用html的方式（推荐）
使用方式，尽量把这个div放在body下面因为mpdf相对定位比较奇怪，
当你的pdf为多张时，你的图片在第几张pdf中，就尽量把图片放在那一张的html附近并且是在body下面，调试位置时，你的top属性是相对当前pdf页面计算的，例如你的图片放在第二张pdf最上方，只需要把你的图片放在第二张html元素附近，并把style中的top值设为0就可以了

<div style="position: absolute; left:0; right: 0; top: 0; bottom: 0;"><img src="/files/images/frontcover.jpg" style="width: 210mm; height: 297mm; margin: 0;" />
</div>

以后有机会更新…

MPDF 使用攻略（如何使用图片，表格）相关推荐

OpenCV计算机视觉编程攻略之提取图片轮廓-使用Canny函数
OpenCV计算机视觉编程攻略之提取图片轮廓-使用Canny函数,很方便..代码如下: #include <vector> #include <iostream> #inclu ...
element表格攻略大全,表头合并,表格合并,动态添加一列
elementui表格攻略大全,表头合并,表格合并,动态添加一列 element合并表头与合并表格,需求就是这样,数据结构中需要有一个大类集合,由于数据结构是我定的,图二是这个表格的数据结构 [{fu ...
node 生产的env文件怎么注入_前端各种文件上传攻略，从小图片到大文件断点续传...
写在前面今年国庆假期终于可以憋在家里了不用出门了,不用出去看后脑了,真的是一种享受.这么好的光阴怎么浪费,睡觉.吃饭.打豆豆这怎么可能(耍多了也烦),完全不符合我们程序员的作风,赶紧起来把文章写完. ...
写给新手前端的各种文件上传攻略，从小图片到大文件断点续传
写在前面今年国庆假期终于可以憋在家里了不用出门了,不用出去看后脑了,真的是一种享受.这么好的光阴怎么浪费,睡觉.吃饭.打豆豆这怎么可能(耍多了也烦),完全不符合我们程序员的作风,赶紧起来把文章写完. ...
前端各种文件上传攻略，从小图片到大文件断点续传
写在前面今年国庆假期终于可以憋在家里了不用出门了,不用出去看后脑了,真的是一种享受.这么好的光阴怎么浪费,睡觉.吃饭.打豆豆这怎么可能(耍多了也烦),完全不符合我们程序员的作风,赶紧起来把文章写完. ...
文明5 java 攻略_【图片】新手入门教程（科技胜利向指导）【文明5吧】_百度贴吧...
该楼层疑似违规已被系统折叠隐藏此楼查看此楼三.游戏快捷键文明百科 F1 Civilopedia F1 经济讯息 F2 Economic Info F2 军事讯息 F3 Military Info ...
Dataset之DA：数据增强(Data Augmentation)的简介、方法、案例应用之详细攻略
Dataset之DA:数据增强(Data Augmentation)的简介.方法.案例应用之详细攻略目录 DA的简介 DA的方法 DA的案例应用 DA的简介数据集增强主要是为了减少网络的过拟合现象 ...
【云栖大会夺宝攻略】在线PK、打卡领奖、抢offer，开发者专属玩法在这里
简介:云栖大会2020就要来了! 什么才是开发者专属"游园"姿势? 丰厚"宝藏"如何免费拿? 不要慌!游玩入口就在下面,快点击图片去"夺宝" ...
国际服服务器怎么换账号吗,战争雷霆国际服怎么切换账号 | 手游网游页游攻略大全...
发布时间:2016-04-21 战争雷霆国际服回归活动和不删档集结活动可以一起参加吗?活动奖励领取说明.战争雷霆战争小伙伴们可能对于不删档开启之后的活动还不了解,那么就和多游小编一起来看一看吧. 战争 ...

MPDF 使用攻略（如何使用图片，表格）

安装使用

样式问题

列表

右浮动

图片

MPDF 使用攻略（如何使用图片，表格）相关推荐

最新文章

热门文章