vueHtml2Pdf点击下载后预览及生成PDF均为空白页如何解决

控制台抛出的Invalid absolute docBaseUrl警告，本质是vue-html2pdf依赖的jsPDF、html2canvas库在处理blob类型的资源路径时出现解析异常，无法正确捕获插槽内的PDF内容，最终导致生成的PDF文件、预览模态框均为空白。

• 修正单位配置不匹配问题
  当前配置中pdf-unit设置为英寸（in），但pdf-content-width使用的是像素单位（px），单位不一致会导致内容渲染范围计算错误，内容被溢出裁剪。可将pdf-unit调整为px，或者将pdf-content-width的单位改为英寸，比如调整为8in。
• 关闭浮动布局配置
  float-layout参数开启后会强制对内容做浮动重排，大概率会导致内容脱离正常文档流无法被捕获，将:float-layout="true"修改为:float-layout="false"。
• 切换稳定版本
  最新版vue-html2pdf依赖的jsPDF版本存在blob路径解析兼容性bug，可降级到v1.8.0稳定版本，卸载当前版本后执行命令npm install vue-html2pdf@1.8.0安装指定版本即可。
• 排查跨域资源
  如果pdf-content插槽内存在外部图片、自定义字体等静态资源，需要确保资源和当前站点同源，或者资源服务端配置了合法的CORS跨域头，否则html2canvas无法捕获跨域资源会导致渲染空白。

<template>
  <div>
    <button @click="downloadPdf">
      Print Download
    </button>

    <vue-html2pdf
      ref="html2Pdf"
      :show-layout="true"
      :float-layout="false"
      :enable-download="true"
      :preview-modal="true"
      filename="hee hee"
      :pdf-quality="2"
      :paginate-elements-by-height="1400"
      :manual-pagination="false"
      pdf-format="a4"
      pdf-orientation="landscape"
      pdf-content-width="800px"
      pdf-unit="px"
    >
      <section slot="pdf-content">
        <p> test my pdf</p>
        <p> my pdf </p>
      </section>
    </vue-html2pdf>
  </div>
</template>

<script>
import VueHtml2pdf from 'vue-html2pdf';
export default {
 components: {
    VueHtml2pdf
  },
  methods: {
    downloadPdf () {
      this.$refs.html2Pdf.generatePdf();
    }
  }
}
</script>

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