Vue.js项目使用jsPDF导出PDF时，下载文件未应用原有CSS样式的求助

现有代码的核心问题点 #

• 解析机制不匹配：jsPDF的html接口无法读取全局CSS、Vue scoped样式规则，只能识别DOM节点上直接计算完成的行内样式、内联属性，不会主动匹配页面样式表中的类名规则。
• 隐藏方式触发样式计算拦截：用v-show="false"本质是给DOM加了display: none，这种状态下浏览器会直接跳过该节点的视觉样式计算，jsPDF拿到的节点根本没有可用的样式信息，导出自然是无样式的纯文本。
• 传参错误：当前代码传入的是innerHTML截取的字符串HTML片段，没有携带DOM节点本身的计算样式结果，相当于把无样式的裸HTML扔给jsPDF处理。

分步修复操作 #

1. 替换隐藏导出组件的实现 #

放弃v-show的隐藏方式，改用离屏定位的方式放置导出组件，既保证用户页面看不到组件，又能让浏览器正常计算组件的样式：

<template>
  <div>
    <v-btn @click="downloadPDF">
     Download
    </v-btn>
    <!-- 替换原来的v-show隐藏逻辑 -->
    <Download
      ref="DownloadComp"
      :style="{
        position: 'absolute',
        left: '-9999px',
        top: 0,
        width: '800px', // 固定宽度避免响应式布局导致导出尺寸错乱
      }"
    />
  </div>
</template>

注意：不要用v-if控制组件存在性，否则点击下载时组件还没渲染完会拿到空DOM。

2. 修正jsPDF的调用参数 #

不要传截取的innerHTML字符串，直接把组件根DOM节点作为解析源传入doc.html，同时补全适配的纸张参数：

downloadPDF () {
  const pdfName = 'download-file'
  // 初始化A4尺寸的PDF文档
  const doc = new jsPDF('p', 'mm', 'a4')
  // 直接传入完整DOM节点，不做innerHTML截取
  const exportRoot = this.$refs.DownloadComp.$el
  doc.html(exportRoot, {
    margin: [10, 10, 10, 10], // 适配A4纸的边距
    width: 800, // 和之前组件固定的宽度保持一致
    callback: (doc) => {
      doc.save(`${pdfName}.pdf`)
    }
  })
}

3. 补全丢失的样式适配 #

因为jsPDF读不到全局类名对应的CSS规则，需要把letter.vue里用到的自定义样式、UI框架样式直接改为行内属性绑定：

<template>
  <div>
    <div
      class="sectional"
      :style="{
        fontSize: '24px',
        fontWeight: '700',
        padding: '20px 0',
        borderBottom: '1px solid #222'
      }"
    >
      Official Letter
    </div>
    <p
      class="intro"
      :style="{
        fontSize: '14px',
        color: '#666',
        margin: '16px 0'
      }"
    >
      Address
    </p>
  </div>
</template>

避坑提示：如果项目用了Vuetify这类UI组件库，导出区域内不要直接放组件库的业务组件，尽量用纯原生HTML元素实现导出内容，避免组件库的全局样式无法被jsPDF识别。

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