用户点击按钮时如何将带完整CSS的Django网页原样导出为PDF？

以下方案可完全解决图表截断、样式丢失问题，适配你当前的业务场景：

方案一：优化原生window.print()（推荐，实现成本最低） #

你之前调用原生打印方法出现截断，是缺少了打印专用CSS适配和Plotly图表静态化预处理，按以下步骤调整即可：

• 新增打印媒体查询CSS，避免图表被页面截断，同时适配打印页尺寸：

@media print {
  /* 禁止所有Plotly图表容器内分页 */
  .plotly-graph-div {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    max-width: 100% !important;
    height: auto !important;
  }
  /* 自定义打印页参数，宽幅热力图可将portrait改为landscape使用横向打印 */
  @page {
    size: A4 portrait;
    margin: 1cm;
  }
  /* 隐藏不需要导出的元素，比如PDF导出按钮、顶部导航栏等 */
  .hide-when-print {
    display: none !important;
  }
}

• 改写PDF按钮的点击逻辑，打印前先将所有动态渲染的Plotly图表转为静态资源，避免打印时JS重绘导致内容丢失：

document.querySelector('#pdf-export-btn').addEventListener('click', async () => {
  const allCharts = document.querySelectorAll('.plotly-graph-div');
  // 预处理所有图表为静态图片，保留当前渲染状态
  for (const chart of allCharts) {
    await Plotly.toImage(chart, {
      format: 'png',
      width: chart.offsetWidth,
      height: chart.offsetHeight
    });
  }
  // 触发打印/导出
  window.print();
  // 导出完成后恢复图表交互能力，不影响用户后续操作
  for (const chart of allCharts) {
    const cachedData = chart.data;
    const cachedLayout = chart.layout;
    Plotly.purge(chart);
    Plotly.newPlot(chart, cachedData, cachedLayout);
  }
})

方案二：Weasyprint服务端渲染适配 #

你之前使用Weasyprint失败，是因为服务端直接拉取页面时不会执行JS渲染Plotly图表，按以下逻辑调整即可正常使用：

• 前端点击PDF按钮时，先将当前已渲染完成的页面静态化：所有CSS样式内联、所有Plotly图表通过Plotly.toImage转为base64格式的图片替换原有容器
• 将静态化后的完整HTML字符串传给后端，直接喂给Weasyprint进行PDF渲染，不需要Weasyprint再请求页面或执行JS

可选补充 #

如果需要跳过系统打印预览直接生成PDF文件下载，可以使用前端html2pdf.js库，配置项中开启pagebreak: { mode: ['avoid-all'] }即可自动避免元素截断，无需额外适配分页规则。 #

内容的提问来源于stack exchange，提问作者Medina