Vue3组合式API中调用vue3-simple-html2pdf的download方法失效怎么办？

问题出在组合式API中ref的访问逻辑上：你直接调用vue3SimpleHtml2pdf.download()时，访问的是Vue创建的Ref对象本身，而非组件实例。在Vue3组合式API里，ref绑定的组件实例需要通过.value属性获取。

修正后的代码如下：

Script 部分 #

import { ref } from 'vue'
import Vue3SimpleHtml2pdf from 'vue3-simple-html2pdf'

export default {
  components: {
    Vue3SimpleHtml2pdf
  },
  setup() {
    const vue3SimpleHtml2pdf = ref(null)
    // 示例配置，可根据实际需求调整
    const pdfOptions = ref({
      orientation: 'portrait',
      format: 'a4'
    })
    const exportFilename = ref('my-exported.pdf')

    const download = () => {
      // 先判断实例是否存在，避免控制台报错
      if (vue3SimpleHtml2pdf.value) {
        vue3SimpleHtml2pdf.value.download()
      }
    }

    return {
      vue3SimpleHtml2pdf,
      pdfOptions,
      exportFilename,
      download
    }
  }
}

模板部分（保持原有代码即可，确保ref名称完全一致） #

<vue3-simple-html2pdf ref="vue3SimpleHtml2pdf" :options="pdfOptions" :filename="exportFilename">
    <div class="main-content">
        <h1>PDF</h1>
    </div>
</vue3-simple-html2pdf>
<button @click="download">Download pdf</button>

额外排查点 #

• 确认组件已正确导入并注册，检查组件名称拼写（Vue3对组件名称大小写敏感）
• 验证pdfOptions配置是否符合组件要求，缺失必要配置可能导致导出失败
• 确保调用download方法时组件已完成挂载（按钮点击场景下一般自动满足，若需页面加载时自动导出，需配合onMounted钩子）

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