Skip to content

Latest commit

 

History

History
101 lines (69 loc) · 2.61 KB

2017_002_html转换为pdf.md

File metadata and controls

101 lines (69 loc) · 2.61 KB
Raw

html2canvas + jsPDF 实现html转换成PDF

js库

html2canvas

jspdf

实现步骤

  1. html2canvas将当前页面的某个element转换成canvas
  2. canvas.toDataURL('image/jpeg')一下转换成base64编码, 格式可配置
  3. 新建jsPDF类实现base64编码到PDF的转换

Demo代码

  • 图片大小需要调整
<script language="JavaScript">
    $('#go-booking').click( function () {
        html2canvas(document.body).then(function (canvas) {
            console.log(canvas.toDataURL('image/jpeg'));
            console.log(canvas.width);
            console.log(canvas.height);

            var doc = new jsPDF();
            doc.addImage(canvas.toDataURL('image/jpeg'), 'JPEG', 0, 0, 210, 300);
            doc.save('kkkk.pdf')
        });
    })
</script>

使用TCPDF库自绘HTML

库

安装(我用的是cakephp框架)

  • 方式一
    1. 修改composer.json 添加
"require": {
        "tecnickcom/tcpdf": "*"
}

2. 执行 composer update`XAMPP的composer, 执行 /your_XAMPP_path/bin/composer.phar 来代替 composer，下同`
3. 这种方式注意将`your_project/vendor/cakephp/cakephp/src/View/View.php`下的`protected $_ext = '.ctp'`值修改为`protected $_ext = '.php'`

  • 方式二

    1. composer tecnickcom/tcpdf

  • 方式三

    1. github上下载源码 将目录拷贝到cakephp工程的 vendor目录下

引用

  • 在controller里面引用
require_once(ROOT . DS . 'vendor' . DS . 'tecnickcom' . DS . 'tcpdf' . DS . 'tcpdf_import.php');
use TCPDF;

使用

public function pdfCreater()
{
    $pdf = new TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);  //新建实例

    $pdf->AddPage();//一个pdf页面的开始

    $html = ''  //这里写html代码，生成的pdf文件会展示出来

    $pdf->writeHTML($html, true, false, true, false, ''); //这句话的作用是把html输出到pdf

    $pdf->lastPage(); //一页结束  如果需要多页，就需要多个 "AddPage-lastPage对儿"

    $pdf->Output('XXXX.pdf', 'I'); //这里把pdf输出，供用户使用
}

example

  • 官网和源码里都有example 路径 tecnickcom/tcpdf/examples
  • 上面的代码是以example_006为基础