php - Laravel dompdf 转换为 pdf 时无法正确显示视图
问题描述
我正在尝试将视图生成为 pdf,没有图像,只有 html,但它看起来不像它应该的样子。
这是网页的外观
这就是pdf的外观
我的刀片视图:
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<a href="/download">
<button class="btn btn-primary">Download PDF</button>
</a>
</div>
<br>
<div class="row justify-content-center">
<div class="card-header">{{ __('Inventory') }}</div>
<form method="post" action="/insert">
@csrf
<div class="d-flex">
<div class="col-md-4">
<input type="text" class="form-control" placeholder="Product Name" name="prodName">
</div>
<div class="col-md-4">
<input type="number" class="form-control" placeholder="Quantity" name="quantity">
</div>
<div class="col-md-4">
<input type="text" class="form-control" placeholder="Remarks" name="remarks">
</div>
<div>
<button class="btn btn-primary" type="submit" id="add">Add</button>
</div>
</div>
</form>
<br>
@foreach($saves as $save)
<div class="inv d-flex">
<div class="col-md-3">
Product Name
<input type="text" class="form-control" value="{{$save->product}}" name="prodName" readonly>
</div>
<div class="col-md-3">
Quantity
<input type="number" class="form-control" value="{{$save->quantity}}" name="quantity" readonly>
</div>
<div class="col-md-3">
Remarks
<input type="text" class="form-control" value="{{$save->remarks}}" name="remarks" readonly>
</div>
<div>
Options
<br>
<delete-button del-id="{{$save->id}}"></delete-button>
</div>
<div>
<div class="col-md-2">
<a href="/inv/{{$save->id}}/edit">
<button class="btn btn-primary">Update</button>
</a>
</div>
</div>
<br>
</div>
@endforeach
</div>
</div>
</div>
@endsection
(对不起,代码很长,我还在练习如何使用这个 PDF 转换器,我想将整个页面转换为 PDF)
这是 layouts.app:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand d-flex" href="{{ url('/home') }}">
Home
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
<form action="/s" method="get">
<div class="row d-flex">
<div class="pl-3 pr-2">
<input class="form-control" type="search" placeholder="Search by product..." id="search" name="search">
</div>
<div>
<button class="btn btn-primary">Search</button>
</div>
</div>
</form>
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
@guest
@if (Route::has('login'))
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@endif
@if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }}
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
@yield('content')
</main>
</div>
</body>
</html>
这是我的控制器:
public function downloadPDF()
{
set_time_limit(300);
$saves = DB::select('select * from inventories order by quantity desc');
$pdf = PDF::loadView('home', compact('saves'));
return $pdf->download('report.pdf');
}
解决方案
推荐阅读
- php - 在 php 中导入时从 csv 中删除重复记录
- javascript - “React/Moment”:durationFromNow 与未来日期一起使用时以负数格式输出持续时间
- html - 当屏幕仅通过 html / css 变窄时如何隐藏 div 块?
- html - 将 SVG 从另一个 svg 文件导入 HTML 文件
- haskell - 如何为具有三个参数的数据类型编写 Applicative 实例?
- javascript - 如何在 vue 中访问子组件中的值
- reactjs - 如何将标题换行到新行反应原生
- angular - Angular Default Currency Pipe 不与金额一起使用
- arduino - 通过firmata将Modelica与arduino连接起来
- scala - Akka (Scala) - 如何正确重置计时器/调度程序?