我试图在我生成的PDF中显示生成的QR码，但由于某种原因，它真的扭曲了。即使我在元素中指定尺寸或作为CSS类，它也不匹配这些尺寸。
我的整个PDF页面：
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Kaart</title>
<style>
body{
margin: 0;
white-space: nowrap;
}
.card{
border:1px solid black;
height: 1102px;
position: relative;
width: 1575px;
}
.card .left{
width: 50%;
border-right: 1px solid black;
height: 100%;
position: relative;
display: inline-block;
}
.card .right{
width: 50%;
height: 100%;
position: relative;
display: inline-block;
}
.card .right .text{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
white-space: normal;
width: 80%;
}
.card .left img{
width: 100%;
height: 100%;
}
.text .top{
font-size: 50px;
}
.text .bottom{
font-size: 30px;
}
</style>
</head>
<body>
@foreach($cards as $key => $card)
<div class="card">
<div class="left">
<img src="{{ $card['card_image'] }}">
</div>
<div class="right">
<div class="text">
<div class="top">
<p>{!! nl2br($card['message']) !!}</p>
</div>
<div class="bottom">
<p>Scan de QR-code of ga naar {{ $card['donate_url'] }} om te doneren aan een goed doel naar keuze.</p>
<div class="qr-wrap">
<img class="qr" src="data:image/png;base64,{{ base64_encode($card['qr_code']) }}" />
</div>
<p>Waarde: <b>{{ $card['wallet_amount'] }}</b></p>
</div>
</div>
</div>
</div>
@if(($key + 1) !== $total)
<div class="page-break"></div>
@endif
@endforeach
</body>
</html>在我的控制器中，我将qr数据指定为：'qr_code' => QrCode::size(300)->generate(route('donate', ['hash' => $hash], true)),
然后像这样加载视图：
$customPaper = array(0,0,626.50,1181.25);
$file = $pdf->loadView('admin.order.card', $data)->setPaper($customPaper, 'landscape')->setOptions(['dpi' => '200']);我试过直接在blade文件中生成QR，但效果是一样的，我也试过直接在image标签中添加width和height参数，但没有效果。
它看起来是这样的：
我也试着把它添加到一个 Package 器中：
.qr-wrap{
position: relative;
width: 300px;
height: 300px;
}
.qr{
height: 100%;
width: 100%;
/*width: 3000px;*/
/*height: 100px;*/
}
1条答案
按热度按时间ccrfmcuu1#
你使用什么QR码生成器？也许有第二个尺寸选项？
这对我很有效：
你也可以尝试设置背景颜色。这有助于调试不同的HTML元素。