Laravel：尝试使用图表生成pdf，但在生成的pdf图表上未显示 [英] Laravel:Trying to generate pdf with charts but on generated pdf charts are not showing
问题描述
我已经安装了laravel 5.6并安装了barryvdh / laravel-dompdf软件包。我使用了一些jquery图表插件在刀片文件上显示图表，效果很好。通过使用dompdf软件包，我试图将此饼图显示为pdf，但图表未显示在pdf上。
图表插件/库在刀片文件上查看时显示以下图表，如何在pdf上显示图表，是否有解决方案来在pdf上显示图表？ ：
我要显示的是此图表流/下载的pdf
代码如下：
控制器代码：
公共函数generate_pdf（）{
$ data = [
'foo'=> ‘bar’
];
//返回视图（ pdf）；
$ pdf = PDF :: loadView（’pdf’，$ data）;
return $ pdf-> stream（'document.pdf'）;
}
pdf.blade.php代码：
<！doctype html>
< html>
< head>
< meta charset = utf-8>
<元http-equiv = X-UA-Compatible content = IE = edge>
< meta name = viewport content = width = device-width，initial-scale = 1>
< title> Create< / title>
< script src = https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js>< / script>
< script src = {{asset（’public / js / piechart.js’）}}>< / script>
< script>
window.onload = createPieChart;
函数createPieChart（）{
var pieChart = new PieChart（ piechart，
{
includeLabel：true，
数据：[40，250 ，70]，
标签：[ 11％， 69.6％， 17.4％]，
颜色：[
[＃FFDAB9，＃FFDAB9]，
[＃E6E6FA，＃E6E6FA]，
[＃E0FFFF，＃E0FFFF]
]
}
）;
pieChart.draw（）;
}
< / script>
< / head>
< body>
<画布id = piechart width = 400 height = 400>
< / canvas>
< / body>
< / html>
经典问题-无法轻松解决
这是一个经典问题。它会影响许多不同的工具，而不仅仅是dompdf。至少涉及三个问题：
- Javascript
服务器端工具可以使用生成的HTML，但不能通常无法运行Javascript。它将HTML和CSS解释为好像是禁用了Javascript的浏览器一样，因此jQuery和许多其他Javascript库根本无法工作，因此无法捕获客户端生成的任何图形。
所有Javascript（jQuery或其他语言）完成后，便可以运行客户端工具。但是，还有其他问题...
- SVG（和其他图形）
有多种方法可以在浏览器中呈现图形。老式的方法是在服务器上生成图形，然后将jpg或png图像下载到浏览器中。但是，它不提供动态图表（无论如何也不容易），详细的鼠标悬停操作等。因此，大多数站点现在都使用SVG或其他客户端系统。目前，所有（或几乎所有）浏览器都支持SVG，因此它已在很大程度上取代了较旧的方法。 SVG（以及较旧的方法）不容易捕获以呈现为PDF或其他文档。结果，即使使用客户端系统，您通常也将面临漏洞。
- 分辨率
在生成客户端时SVG图表，所有内容的大小均取决于您的屏幕分辨率。如果您确实设法与HTML一起捕获了该图表，则文本将是高分辨率的（因为它是文本，并且可以被视为具有可缩放字体的PDF中的文本），但是图形将限于原始绘制的分辨率。这适合临时使用，但在高质量打印机上打印时可能无法达到所需或期望的质量。典型的屏幕分辨率为〜100dpi，典型的打印机分辨率为〜200dpi-300dpi（等级更高，但从实际角度出发，以200dpi或更高的分辨率呈现彩色图像通常令人满意，除了艺术品质的照片外。） b
虚拟浏览器图像捕获
到目前为止，我找到的最好的解决方案是使用虚拟或无头标签。浏览器以创建所有内容-运行Javascript并生成SVG输出以及HTML& CSS。然后将输出捕获为高分辨率图像，以插入到PDF中。您可以使用任何服务器端框架/工具包/等。捕获和创建PDF。
有免费的开源软件包。可能最受欢迎的是 PhantomJS ，但是我刚刚检查了一下，它目前已存档/未激活。我曾经使用过它，但是它确实起作用，但是有很多问题。
还有各种可用的服务。我目前使用的是 URLBox.io 。我对此没有任何个人兴趣，只是一个非常满意的客户。它包括用于将图像保存到Amazon S3的选项（取决于订阅类型），或者您可以在本地捕获。对我而言，最重要的是您可以设置非常高的分辨率，以使捕获的图像看起来真的很棒。我主要将其用于自动将网页图像插入PDF。
I have installed laravel 5.6 and and installed barryvdh/laravel-dompdf package. I have used some jquery chart plugin to show chart on blade file, it's works fine. By using dompdf package , I am trying to shown this piechart on pdf, but chart's are not showing on pdf. How to show charts on pdf, Is there any solution to show charts on streaming/download pdf.?
The chart plugin/library shows the following chart when viewing on blade file:
What I am trying is to show this chart on streaming/downloaded pdf
Codes are given below:
Controller Code:
public function generate_pdf(){
$data = [
'foo' => 'bar'
];
//return view('pdf');
$pdf = PDF::loadView('pdf', $data);
return $pdf->stream('document.pdf');
}
pdf.blade.php code:
<!doctype html>
<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">
<title>Create</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="{{ asset('public/js/piechart.js') }}"></script>
<script>
window.onload = createPieChart;
function createPieChart() {
var pieChart = new PieChart( "piechart",
{
includeLabels: true,
data: [40, 250, 70],
labels: ["11%", "69.6%", "17.4%"],
colors: [
["#FFDAB9", "#FFDAB9"],
["#E6E6FA", "#E6E6FA"],
["#E0FFFF", "#E0FFFF"]
]
}
);
pieChart.draw();
}
</script>
</head>
<body>
<canvas id="piechart" width="400" height="400">
</canvas>
</body>
</html>
Classic Problem - No Easy Fix
This is a classic problem. It affects many different tools, not just dompdf. There are at least three issues involved:
- Javascript
A server-side tool can work with generated HTML but does not normally run Javascript. It interprets the HTML and CSS as if it were a browser with Javascript disabled, and therefore jQuery and plenty of other Javascript libraries simply don't work, so any graphics produced client-side are impossible to capture.
A client-side tool can run after all Javascript (jQuery or otherwise) has completed. However, there are still other problems...
- SVG (and other graphics)
There are a number of ways to render graphics in a browser. The old-fashioned way is to produce the graphics on the server and download jpg or png images into a browser. However, that does not provide dynamic charts (not easily anyway), detailed mouseover actions, etc. So most sites now use SVG or another client-side system. SVG is supported by all (or nearly all) current browsers, so it has largely replaced the older methods. SVG (and the older methods as well) is NOT easy to capture for rendering into a PDF or other document. As a result, even with client-side systems you will typically end up with "holes" where the graphics would be.
- Resolution
When producing a client-side SVG chart, everything is sized based on your screen resolution. If you do manage to capture that chart together with HTML, the text will be high resolution (because it is text and can be treated as text in a PDF with scalable fonts) but the graphics will be limited to the resolution as originally drawn. That is fine for casual usage but may not produce the quality needed or desired when printing on a high-quality printer. Typical screen resolution is ~ 100dpi, typical printer resolution is ~200dpi - 300dpi (rated much higher, but from a practical standpoint color images render at 200dpi or greater are typically satisfactory except for art-quality photographs).
Virtual Browser Image Capture
The best solution I have found so far is to use a virtual or "headless" browser to create everything - running Javascript and producing SVG output along with HTML & CSS. Then capture the output as a high-resolution image to insert into your PDF. You can use any server-side framework/toolkit/etc. to both do the capture and create the PDF.
There are free open-source packages available. Probably the most popular is PhantomJS, but I just checked and it is currently archived/not active. I have used it and it worked, but had quite a few issues.
There are also various services available. One I currently use is URLBox.io. I have no personal interest in it - just a very satisfied customer. It includes the option (depending on subscription type) for saving images to Amazon S3, or you can capture locally. Most important, for me, is that you can set very high resolution so that captured images really look great. I use it primarily for automated insertion of images of web pages into PDFs.
这篇关于Laravel：尝试使用图表生成pdf，但在生成的pdf图表上未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
