使用 javascript 渲染的 html2pdf 問題<h1>放錯地方的元素</h1>

Question

我正在做這個項目，我想做一個pdf export 。 問題可能在於縮放，我真的需要幫助。

以下是來自 html 的圖片和問題。 在 html 圖片上，您可以看到它是如何組織的並且看起來很漂亮，但是當html2pdf 呈現它並設置自己的比例時，它變得不可讀和未分類。

JS Function：

     function pdf() {
      
       var element = document.getElementById('hello');
        var opt = {
          margin:       1,
          filename:     'myfile.pdf',
          image:        { type: 'jpeg', quality: 0.98 },
          html2canvas:  { scale: 2 },
          jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
        }; html2pdf().set(opt).from(element).save(); }

我需要它的 a4 格式並且它不會產生以下這些問題：

html 的樣子：

html現場

出現的問題：

從 html 站點看不到“Pregdled”

該怎么辦？

Answer 1

我解決了這個問題。

解釋：

當 html2pdf 呈現 html 站點時，最好的呈現方式是將寬度設置為百分比 (%)

例如：

就我而言

預定的

有css 寬度：80vw； 所以我把它改成了width: 100%;

希望有人覺得這很有用:)

Answer 2

在使用 addfont 為 html2pdf 中的 h1 設置樣式時，出現錯誤“TCPDF 錯誤：無法包含字體定義文件：robotoslabbold”。

我找到的解決方案是改用 p。

此外，要添加字體，請使用https://www.xml-convert.com/ttftopdf將其轉換，然后將所有三個文件（z、afm、php）上傳到您想要的任何位置，並在 css 中引用。

$html2pdf->addFont('robotoslabbold', '', 'fonts/robotoslabbold.php');