3

HTML 转 PDF 或 图片

 2 years ago
source link: https://sevming.github.io/PHP/html-to-pdf-image.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

HTML 转 PDF 或 图片

发表于 2018-10-09

| 更新于: 2021-07-13

| 分类于 PHP

knp-snappy 安装
composer require knplabs/knp-snappy
WINDOWS 系统安装扩展包 wkhtmltopdf-windows
composer require wemersonjanuario/wkhtmltopdf-windows#二进制文件路径(32位和64位)vendor\wemersonjanuario\wkhtmltopdf-windows\bin
LINUX 系统扩展包
#i386 的二进制文件composer require h4cc/wkhtmltopdf-i386composer require h4cc/wkhtmltoimage-i386#amd64composer require h4cc/wkhtmltopdf-amd64composer require h4cc/wkhtmltoimage-amd64
<?php
use Knp\Snappy\Pdf;
use Knp\Snappy\Image;

require 'vendor/autoload.php';

$baseDir = __DIR__;
$pdfBinaryFile = $baseDir . '/vendor/wemersonjanuario/wkhtmltopdf-windows/bin/64bit/wkhtmltopdf.exe';
$imageBinaryFile = $baseDir . '/vendor/wemersonjanuario/wkhtmltopdf-windows/bin/64bit/wkhtmltoimage.exe';

if (strpos(PHP_OS, 'Linux') !== false) {
    $h4ccPath = $baseDir . '/vendor/h4cc/';
    $systemBit = exec('getconf LONG_BIT');
    if ($systemBit == '32') {
        $pdfBinaryFile = $h4ccPath . 'wkhtmltopdf-i386/bin/wkhtmltopdf-i386';
        $imageBinaryFile = $h4ccPath . 'wkhtmltoimage-i386/bin/wkhtmltoimage-i386';
    } else {
        $pdfBinaryFile = $h4ccPath . 'wkhtmltopdf-amd64/bin/wkhtmltopdf-amd64';
        $imageBinaryFile = $h4ccPath . 'wkhtmltoimage-amd64/bin/wkhtmltoimage-amd64';
    }
}

$html = <<<HTML
    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
            <p style="font-family: 'Microsoft YaHei'">Hello World, 你好 世界!</p>        
    </body>
    </html>
HTML;

// HTML 转 PDF
$pdfSnappy = new Pdf($pdfBinaryFile);
$pdfSnappy->generateFromHtml($html, $baseDir . '/test.pdf', [], true);

// HTML 转 图片
$imageSnappy = new Image($imageBinaryFile);
$imageSnappy->generateFromHtml($html, $baseDir . '/test.png', [
    'width' => 100,
    'height' => 100,
    'quality' => 100
], true);

// 生成海报(海报背景 + 二维码 + LOGO + 文字描述)
$backgroundImage = $baseDir . '/bg.jpg';
$qrcodeImage = $baseDir . '/qrcode.png';
$logoImage = $baseDir . '/logo.png';
$title = "海报标题AAAABBBBCCCCDDDD";
$outputImage = $baseDir . '/poster.png';

list ($width, $height) = getimagesize($backgroundImage);
$snappy = new Image($imageBinaryFile);
$snappy->generateFromHtml(generateHtml($backgroundImage, $qrcodeImage, $logoImage, $title), $outputImage, [
    'width' => $width,
    'height' => $height,
    'quality' => 100
], true);

/**
 * 生成HTML
 *
 * @param string $backgroundImage
 * @param string $qrcodeImage
 * @param string $logoImage
 * @param string $title
 *
 * @return string
 */
function generateHtml($backgroundImage, $qrcodeImage, $logoImage, $title)
{
    $html = <<<HTML
        <!DOCTYPE html>
        <html lang="zh">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
            <title></title>
            <style>
                body, html {
                    width: 100%;
                    height: 100%;
                    margin: 0;
                    padding: 0;
                    font-family: "Microsoft YaHei"
                }
                .container {
                    position: relative;
                    display: flex;
                    width: 100%;
                    height: 100%;
                }
                .img-bg {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                }
                .content {
                    position: relative;
                    z-index: 999;
                    left: 25%;
                    top: 37.5%;
                    width: 50%;
                    height: 25%;
                    border-radius: 7px;
                }
                .img-qrcode {
                    width: 100%;
                    height: 100%;
                }
                .img-logo {
                    position: absolute;
                    top: 40%;
                    left: 40%;
                    width: 20%;
                    height: 20%;
                }
                .title {
                    width: 90%;
                    margin: 2px auto;
                    overflow: hidden;
                    font-size: 20px;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    text-overflow: ellipsis;
                    -webkit-box-orient: vertical;
                    text-align: center;
                }
            </style>
        </head>
        <body>
        <div class="container">
            <img src="{$backgroundImage}" class="img-bg">
            <div class="content">
                <img src="{$qrcodeImage}" class="img-qrcode">
                <img src="{$logoImage}" class="img-logo">
                <div class="title">{$title}</div>
            </div>
        </div>
        </body>
        </html>
HTML;

return $html;
}

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK