Nuxt框架使用vueHtml2Pdf时内容渲染空白但下载功能正常怎么解决

核心是vue-html2pdf组件的show-layout配置项属性设置错误导致的。
该属性的作用是控制组件是否将待导出的内容区域渲染到页面DOM中，你当前配置为:show-layout="false"，组件只会把插槽内的内容存储在内存中用于生成PDF，不会将内容展示给前端用户，这就是为什么点击下载可以正常导出PDF，但页面看不到对应区域内容的原因，和Nuxt运行环境无关联。

根据你的业务需求可以选择两种处理方式： #

方案1：需要将待导出内容同时展示在页面上 #

直接修改show-layout属性值为true即可，修改后的组件配置如下：

<vue-html2pdf
  ref="html2Pdf"
  :show-layout="true"
  :enable-download="true"
  :pdf-quality="2"
  :manual-pagination="true"
  pdf-content-width="100%"
  :html-to-pdf-options="htmlToPdfOptions"
>
  <section slot="pdf-content">
    <!-- 待导出内容区域 -->
    <div
      v-interpolation="{ newWindow: true }"
      class="articleContent__content"
      v-html="article.content"
    ></div>
    <!-- 待导出内容区域结束 -->
  </section>
</vue-html2pdf>

方案2：不需要将待导出内容展示在页面上（仅用于导出） #

你当前的配置本身是正常的，不需要修改组件属性。如果你的业务场景是页面上已经有一份相同的浏览用内容，只需要隐藏导出用的副本，那可以直接保留现有配置即可。
如果需要调整导出和页面展示的样式互不干扰，也可以将内容抽离为公共复用部分，页面单独渲染浏览用内容，vue-html2pdf组件内仅保留导出用的隐藏副本，示例代码如下：

<!-- 页面展示给用户的浏览内容 -->
<div
  v-interpolation="{ newWindow: true }"
  class="articleContent__content"
  v-html="article.content"
></div>

<!-- 导出按钮 -->
<ArticleActions @download="downloadPDF()" />

<client-only>
  <!-- 仅用于导出的隐藏组件 -->
  <vue-html2pdf
    ref="html2Pdf"
    :show-layout="false"
    :enable-download="true"
    :pdf-quality="2"
    :manual-pagination="true"
    pdf-content-width="100%"
    :html-to-pdf-options="htmlToPdfOptions"
  >
    <section slot="pdf-content">
      <div
        v-interpolation="{ newWindow: true }"
        class="articleContent__content for-export"
        v-html="article.content"
      ></div>
    </section>
  </vue-html2pdf>
</client-only>

你可以单独给导出用的内容加专属类名（比如示例中的for-export），调整导出时的专属样式，避免影响页面浏览效果。

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