个人中心
gpt4 book ai didi

Generate one html or pdf page from a series of php-created html pages(从一系列由php创建的html页面生成一个html或pdf页面)

转载 作者：bug小助手 更新时间：2023-10-24 21:49:08 24 4
gpt4 key购买 nike



I created a php script that dynamically creates a series of html pages (each exact A4 size) based on the user selecting several components to make the page such as background image, logos to place on top or at the bottom and different pieces of text translated by Google.

我创建了一个php脚本，根据用户选择的几个组件来动态创建一系列的html页面(每个都是a4大小)，这些组件包括背景图像、放在顶部或底部的徽标以及由谷歌翻译的不同文本。


The layout is quite complex with a few div placed at exact position on the A4 page.

布局相当复杂，有几个div被放置在A4页面上的准确位置。


 <!DOCTYPE html>
 <html lang="en">
 <head>
 <script type="text/javascript" src="https://kit.fontawesome.com/245732172a.js" crossorigin="anonymous"></script>
 <style>     
 html, body, div, p, li { margin:0; font-family:Calibri; color:#858484; }
 .div-edit, .div-edit a, .div-edit a:link, .div-edit a:visited { font-size:0.9em; color:white; }
 .div-link, .div-link a, .div-link a:link, .div-link a:visited { font-size:{!! $page->font_size_link !!}em; color:white; text-align:center; }
 .div-strip { color:white; font-size:{!! $page->font_size_strip !!}em; font-weight:bold; text-align:center; z-index: 10; }
 h1 { color:#f7a600; font-size:{!! $page->font_size_title !!}em; font-weight:normal; }
 h2 { color:#858484; font-weight:bold; font-size:{!! $page->font_size_subtitle !!}em; }
 strong, .scStrong { font-weight:bold; color:#f7a600; }
 li { font-size:{!! $page->font_size_criteria !!}em; }
 li::marker { content:"✓  "; color:#f7a600; }
 
 .container { position:relative; background-image:url('{{ $page->layout }}'); background-repeat:no-repeat; background-size:contain; width:210mm; height:297mm; padding:0; }
 .div-edit { position:absolute; top:0mm; left:37mm; width:173mm; height:8mm; padding:0; background-color:grey; text-align:right; padding-top:2mm; }
 .div-logo { background-image:url('{{ $page->logo }}'); background-repeat:no-repeat; background-size:contain; }
 .div-logo { position:absolute; top:{{ $pdf['yLogo'] }}mm; left:{{ $pdf['xLogo'] }}mm; width:{{ $pdf['wLogo'] }}mm; height:{{ $pdf['hLogo'] }}mm; padding:0; }
 .div-body { position:absolute; top:18mm; left:48mm; width:150mm; height:250mm; padding:0; }
 .spacer { float:right; width:100mm; height:50mm; background:transparent; shape-outside:polygon(100% 0%, 100% 100%, 0 0%); }
 h1 { margin:0; padding-top:0mm; padding-right:0mm; }
 h2 { margin:0; padding-top:6mm; padding-bottom:6mm; padding-right:0mm; }
 .div-logos { background-image:url('{{ $page->logos }}'); background-repeat:no-repeat; background-size:contain; }
 .div-logos { position:absolute; top:270mm; left:48mm; width:150mm; height:14mm; padding:0; }
 .div-link { position:absolute; top:285mm; left:48mm; width:150mm; height:5mm; padding:0; }
 .div-strip { position: absolute; top:19.5mm; left:51mm; width:200mm; height:20mm; padding:0; 
     -ms-transform: rotate(27deg);
     -webkit-transform: rotate(27deg); 
     -moz-transform: rotate(27deg);
     -o-transform: rotate(27deg);
     -sand-transform: rotate(27deg);
     transform: rotate(27deg);
 }
 .container { border:1px solid grey; }
 </style>
 </head>
 
 <body>
 <div class="container">
         
     <div class="div-logo"></div>
 
     <div class="div-body">
         <div class="spacer"></div>
         <h1>{!! $page->title !!}</h1>
         <h2>{!! $page->subtitle !!}</h2>
         {!! $page->body !!}
     </div>
 
     <div class="div-logos"></div>
 
     <div class="div-link">
         {!! $page->link !!}
     </div>
 
     <div class="div-strip">
         {!! $page->strip !!}
     </div>
      
 </div>
 </body>
 </html>

An example can been seen here.

这里可以看到一个例子。


The ideal output is that the user gets a series of PDFs to be downloaded as a zip file. The problem is none of the free PHP/HTML-to-PDF packages are doing a good job at a complex layout.

理想的输出是用户获得一系列要以压缩文件形式下载的PDF。问题是，没有一个免费的PHP/HTML-to-PDF包在复杂的布局上做得很好。


Another idea would be to combine all the dynamically generated HTML pages into one big HTML page that the user could print as a PDF. Not even sure if that would work with the absolute positioning of the divs...

另一个想法是将所有动态生成的HTML页面组合成一个大的HTML页面，用户可以将其打印为PDF。甚至不确定这是否适用于div的绝对定位...


I also tried the html2canvas but I got stuck at the second part... could not figure out how to send the data to the php script on laravel. This method seemed promising but I could not see the result.

我也尝试了html2画布，但我在第二部分卡住了…我不知道如何将数据发送到laravel上的php脚本。这个方法似乎很有前途，但我看不出结果。


 <script src="html2canvas.min.js"></script>
 <script>
 window.onload = () => html2canvas(document.body).then(canvas => {
   // CANVAS TO FORM DATA
   var data = new FormData();
   data.append("img", canvas.toDataURL("image/png"));
  
   // UPLOAD TO 2B-SAVE.PHP
   fetch("2b-save.php", { method:"post", body:data })
   .then(res => res.text())
   .then(txt => console.log(txt));
 });

Last I looked at the browser headless web service but nothing is really for free and this project is for a NGO...

上一次我看了一下浏览器的无头Web服务，但没有什么是真正免费的，这个项目是为一个非政府组织……


So I would really appreciate some feedback on the matter...

因此，我非常感谢大家对此事的反馈……


更多回答

Another solution is a variation of your print HTML to PDF idea. Instead of one large file, use pagination where each button will navigate the user to a different page where they can print that one to a PDF. And just use CSS to hide the pagination buttons from the printer.

另一种解决方案是将您的打印HTML转换为PDF的想法的变体。不是一个大文件，而是使用分页，每个按钮都会导航到不同的页面，在那里他们可以将一个打印到PDF。只需使用css对打印机隐藏分页按钮即可。

Please focus on the main parts - is this a PHP problem (on your server), or an HTML, JS, or CSS problem (in the browser)?

请关注主要部分-这是PHP问题（在您的服务器上），还是HTML，JS或CSS问题（在浏览器中）？

@NicoHaase There are several options using different techniques (as you listed them... PHP problem (on your server), or an HTML, JS, or CSS)... which one is the easiest giving the best results... that is exactly the purpose of my question.

@NicoHaase有几个使用不同技术的选项(正如您列出的那样...PHP问题(在您的服务器上)，或者是一个HTML、JS或CSS)...哪一个是最简单的给出最好的结果。这正是我提问的目的。

优秀答案推荐

There are an extensive list of free PDF generation tools available, just within JavaScript. I'd assume one of these can accomplish what you need, despite the statement:

有大量免费的PDF生成工具可用，仅在JavaScript中就有。我认为其中之一可以实现你所需要的，尽管声明如下：


"[N]one of the free PHP/HTML-to-PDF packages are doing a good job at a complex layout."

“[N]一个免费的PHP/Html-to-PDF包在复杂的布局上做得很好。”


You can use:

https://parall.ax/products/jspdf

https://tcpdf.org/

https://pdf-lib.js.org/

http://pdfmake.org/#/

https://pdfme.com/

您可以使用：https://parall.ax/products/jspdf https://tcpdf.org/https://pdf-lib.js.org/http://pdfmake.org/#/https://pdfme.com/


If you've genuinely given thought and effort to using each of those without the ability to complete your project as desired, you may consider revisiting your project requirements and expectations to allow a solution using one of these libraries. This is by no means an exhaustive list of options, by the way.

如果您真诚地考虑并努力使用这些库中的每一个，但无法按要求完成您的项目，您可能会考虑重新考虑您的项目需求和期望，以允许使用这些库中的一个来实现解决方案。顺便说一句，这绝不是一份详尽的选择清单。


Comprehending the intricacies of your project and explaining which library will work for you and why is far outside the scope of this forum. If you provide those specifics in detail, not just your code, then perhaps a specific recommendation would be viable.

理解您项目的复杂性，并解释哪个库可以为您工作，以及为什么不在本论坛的讨论范围内。如果您提供详细的细节，而不仅仅是您的代码，那么特定的建议可能是可行的。


更多回答

These tools look to me that it is to create PDF from scratch. I need a tool that convert complex html file into a pdf from php.

在我看来，这些工具是从头开始创建PDF的。我需要一个工具，将复杂的html文件转换为pdf从php。

24 4 0
文章推荐： How to have a set number of attempts for user input? [duplicate](如何设置用户输入的尝试次数？[复制])
文章推荐： AWS S3 bucket error in Fetching AWS gateway API(获取AWS网关API时出现AWS S3存储桶错误)
文章推荐： Convert base-2 binary number string to int(将基数为2的二进制数字字符串转换为整型)
文章推荐： How can I put two navbar elements to the end in Bootstrap 5?(如何在Bootstrap 5中将两个导航栏元素放在末尾？)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com