jsPDF导出PDF仅显示标题、部分内容为空白且布局拥挤问题求助

问题原因分析 #

你遇到的两个异常核心由两个原因导致：

1. jsPDF的html()方法默认不会加载页面中引用的外部/全局样式，你组件使用的Tailwind工具类样式没有被带入渲染流程，导致正文样式丢失、内容透明/空白，同时布局规则失效出现排版拥挤
2. 你当前未配置任何尺寸、边距、缩放参数，A4画布宽度有限，内容超宽后会被强制压缩甚至裁切，同时直接传入innerHTML而非真实DOM节点，会丢失已渲染的动态内容（尤其是v-html插入的正文）

修复方案 #

你可以按照以下步骤调整代码即可解决问题：

1. 导出前先隐藏不需要导出的下载按钮，避免无关内容进入PDF
2. 给html()方法补充样式、边距、缩放相关配置，直接传入DOM节点而非innerHTML保证内容完整性
3. 针对用到的SVG图标和动态内容，确保导出时已完成渲染

修改后的逻辑层代码参考：

downloadPDF() {
  // 先隐藏下载按钮，避免导出到PDF中
  const downloadBtn = this.$refs.content.querySelector('.btn-green')
  downloadBtn.style.display = 'none'
  
  const doc = new jsPDF('p', 'pt', 'a4')
  const pageWidth = doc.internal.pageSize.getWidth()
  
  doc.html(this.$refs.content, { // 直接传DOM节点，不用innerHTML
    callback: function (doc) {
      doc.save('op.pdf')
      // 导出完成后恢复按钮显示
      downloadBtn.style.display = 'block'
    },
    x: 30, // 增加左右边距
    y: 30, // 增加上下边距
    width: pageWidth - 60, // 画布宽度减去左右边距，避免内容超宽压缩
    windowWidth: document.body.scrollWidth, // 匹配页面实际渲染宽度
    useCORS: true // 若有外部图片可以加上这个配置
  })
}

如果还是有样式丢失的问题，你可以把组件用到的核心样式以内联style的方式写到元素上，或者在配置里补充styles参数传入自定义样式字符串即可。

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