Vue按钮点击调用window.open打开PDF在Mac Safari失效如何解决

数据老陈

2026-10-1

结论

不需要传入$event参数，该问题与事件参数无关，是Safari浏览器特有安全策略、以及代码写法问题共同导致的。

问题原因

Vue的methods中不推荐使用箭头函数定义方法：箭头函数会绑定父级作用域的this而非当前Vue实例，即使你的代码中没有用到this，部分版本的Safari也会无法识别该方法是用户主动点击触发的合法交互，导致弹出行为被拦截。
Safari对window.open打开非网页类资源（比如PDF）的兼容支持较差，即使用户主动触发的调用，也有概率被内置安全策略拦截。

修复方案

方案1：修正方法写法（最简改动）

把methods里的箭头函数改为普通函数写法即可解决大部分场景的问题：

methods: {
  openPDF() {
    window.open("take-survey.pdf", "_blank");
  }
}

方案2：兼容Safari的最优方案（推荐）

放弃window.open，改用动态创建a标签触发点击的方式实现，适配性更高，不会被Safari拦截：

methods: {
  openPDF() {
    const link = document.createElement('a')
    link.href = 'take-survey.pdf'
    link.target = '_blank'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }
}