html2pdf 将图像适合 pdf

Question

我终于让我的 html2pdf 开始工作，以我想要的方式在 pdf 中显示我的网页（任何其他尺寸都无法正确显示，所以我不断调整格式尺寸，直到它完全适合），最终结果正是我想要的希望它看起来像...除了即使我的纵横比对于风景来说是正确的，它仍然使用非常大的图像并且pdf不是标准字母大小（或a4），它是我设置的大小。 这会导致 pdf 过大，并且打印效果不佳，除非我们针对打印机进行调整。 我基本上希望将这个精确的图像转换为 a4 或 letter 大小以制作较小的 pdf。 如果我不使用我设置的尺寸，虽然东西会被切断。

无论如何，将生成的 pdf 大小调整为 a4 尺寸（仍然适合其上的图像）。 我尝试的一切都不起作用，我觉得我错过了一些简单的东西。

 const el = document.getElementById("test);
    var opt = {
      margin: [10, 10, 10, 10],
      filename: label,
      image: { type: "jpeg", quality: 0.98 },
      //pagebreak: { mode: ["avoid-all", "css"], after: ".newPage" },
      pagebreak: {
        mode: ["css"],
        avoid: ["tr"],
        //    mode: ["legacy"],
        after: ".newPage",
        before: ".newPrior"
      },
      /*pagebreak: {
      before: ".newPage",
      avoid: ["h2", "tr", "h3", "h4", ".field"]
    },*/
      html2canvas: {
        scale: 2,
        logging: true,
        dpi: 192,
        letterRendering: true
      },
      jsPDF: {
        unit: "mm",
        format: [463, 600],
        orientation: "landscape"
      }
    };

   
      var doc = html2pdf()
     
        .from(el)
        .set(opt)
        .toContainer()
        .toCanvas()
        .toImg()
        .toPdf()
         .save()

Answer 1

我也一直在为此苦苦挣扎。最后我能够为我解决这个问题。对我来说，诀窍是在

width

中设置

html2canvas

属性。我的应用程序具有固定宽度，并将

html2canvas

的宽度设置为我的应用程序的宽度，缩放 PDF 以适合 A4 纸。

html2canvas: { width: element_width},

尝试添加上述选项看看是否有效。尝试找出打印区域的宽度（以像素为单位）并将

element_width

替换为该宽度。

为了完整起见：我正在使用 Plotly Dash 创建 Web 用户界面。在我的界面上，我包含一个按钮，单击该按钮会生成仪表板的 PDF 报告。下面我添加了我用于此目的的代码，以防有人正在寻找 Dash 解决方案。要在 Dash 中使用此功能，请下载 html2pdf.bundlemin.js 并将其复制到

assets/

文件夹。 PDF 文件将被下载到浏览器的默认下载文件夹（它可能会给出下载提示，但这对我来说不是这样的）。

from dash import html, clientside_callback
import dash_bootstrap_components as dbc

# Define your Dash app in the regular way

# In the layout define a component that will trigger the download of the 
# PDF report. In this example a button will be responsible.
app.layout = html.Div(
    id='main_container',
    children = [
        dbc.Button(
            id='button_download_report',
            children='Download PDF report',
            className='me-1')
     ])

# Clientside callbacks allow you to directly insert Javascript code in your
# dashboards. There are also other ways, like including your own js files
# in the assets/ directory.  
clientside_callback(
    '''
    function (button_clicked) {
        if (button_clicked > 0) {
            // Get the element that you want to print. In this example the 
            // whole dashboard is printed
            var element = document.getElementById("main_container")

            // create a date-time string to use for the filename
            const d = new Date();
            var month = (d.getMonth() + 1).toString()
            if (month.length == 1) {
                month = "0" + month
            }
            let text = d.getFullYear().toString() + month + d.getDay() + '-' + d.getHours() + d.getMinutes();

            // Set the options to be used when printing the PDF
            var main_container_width = element.style.width;
            var opt = {
                margin: 10,
                filename: text + '_my-dashboard.pdf',
                image: { type: 'jpeg', quality: 0.98 },
                html2canvas: { scale: 3, width: main_container_width, dpi: 300 },
                jsPDF: { unit: 'mm', format: 'A4', orientation: 'p' },
                // Set pagebreaks if you like. It didn't work out well for me.
                // pagebreak: { mode: ['avoid-all'] }
            };
            // Execute the save command. 
            html2pdf().from(element).set(opt).save();
        }
    }
    ''',
    Output(component_id='button_download_report', component_property='n_clicks'),
    Input(component_id='button_download_report', component_property='n_clicks')
)