使用Dompdf laravel6时,pdf文件中未显示背景图像

问题描述

控制器

use PDF;
class PdfController extends Controller
{
    public function index(){
       return view('pdf/web',compact('data'))
    }
    public function generate(){
        $pdf = \App::make('dompdf.wrapper');
        $pdf -> loadView('pdf/web',compact('data'));
        return $pdf->stream();
    }
}

web.blade.PHP

<!DOCTYPE html>
<html>
<head>
<Meta http-equiv="Content-Type" content="charset=utf-8" />
<Meta charset="UTF-8">
<title>100001</title>
<style type="text/css">
   
    @page {
        size: A4;
        margin-top:0.5cm;
        margin-bottom:0;
        margin-left:0;
        margin-right:0;
        padding: 0;
    }
    .firstdiv{
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        font-family: Cambria,Georgia,serif;
        position: relative;
        margin: auto;
        width: 1200px;
        height: 900px;
        background-image: url("/img/bgimg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
</style>
</head>
<body>
    <div class="firstdiv">
          #CONTENTS
          #CONTENTS
          #CONTENTS
          #CONTENTS
    </div>

我面临两种类型的问题

  1. 当我打开网页时,一切正常。对于dompdf,背景图像未显示在pdf文件中。为了更多的清除:我试图查看一个网页并从该网页创建pdf。当我使用控制器的索引功能打开网页时。我设计的一切都工作正常。但pdf文件仅打开内容,未显示背景图片
  2. 我的设计的宽度为1000px,高度为630px。所以我想要PDF处于横向模式。但pdf即将进入纵向模式。本节的其余部分显示pdf中的空白。

解决方法

我建议为此使用javascript库。因为它们会在渲染所有内容后导出您的页面。我已经使用jspdf + html2canvas在项目中导出证书,并且效果很好。我最近也发现了我认为很棒的we。

jspdf + html2canvas:

https://jsfiddle.net/boLxkgj8/14/

木偶:

https://github.com/puppeteer/puppeteer