问题描述
控制器
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>
我面临两种类型的问题
- 当我打开网页时,一切正常。对于dompdf,背景图像未显示在pdf文件中。为了更多的清除:我试图查看一个网页并从该网页创建pdf。当我使用控制器的索引功能打开网页时。我设计的一切都工作正常。但pdf文件仅打开内容,未显示背景图片。
- 我的设计的宽度为1000px,高度为630px。所以我想要PDF处于横向模式。但pdf即将进入纵向模式。本节的其余部分显示pdf中的空白。
解决方法
我建议为此使用javascript库。因为它们会在渲染所有内容后导出您的页面。我已经使用jspdf + html2canvas在项目中导出证书,并且效果很好。我最近也发现了我认为很棒的we。
jspdf + html2canvas:
https://jsfiddle.net/boLxkgj8/14/
木偶:
https://github.com/puppeteer/puppeteer