欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

從一系列php創(chuàng)建的html頁面中生成一個(gè)html或pdf頁面

CSS

我創(chuàng)建了一個(gè)php腳本，它基于用戶選擇幾個(gè)組件來制作頁面，例如背景圖像、放在頂部或底部的徽標(biāo)以及由Google翻譯的不同文本，動(dòng)態(tài)地創(chuàng)建一系列html頁面(每個(gè)頁面正好是A4大小)。

布局相當(dāng)復(fù)雜，在A4紙上的準(zhǔn)確位置放置了幾個(gè)div。

<!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>

這里可以看到一個(gè)例子。

理想的輸出是用戶得到一系列pdf文件作為zip文件下載。問題是沒有一個(gè)免費(fèi)的PHP/HTML-to-PDF包能很好地處理復(fù)雜的布局。

另一個(gè)想法是將所有動(dòng)態(tài)生成的HTML頁面合并成一個(gè)大的HTML頁面，用戶可以打印成PDF格式。甚至不確定這是否適用于div的絕對(duì)定位...

我也嘗試了html2canvas，但我在第二部分卡住了...不知道如何將數(shù)據(jù)發(fā)送到laravel上的php腳本。這種方法似乎有希望，但我看不到結(jié)果。

<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));
 });

上次我看了瀏覽器無頭網(wǎng)絡(luò)服務(wù)，但沒有什么是真正免費(fèi)的，這個(gè)項(xiàng)目是一個(gè)非政府組織...

所以我真的很希望能得到一些反饋...