Vue对接Laravel API下载的PDF文件无法加载如何解决

问题原因排查&解决方案 #

1. 静态资源访问路径错误（最高概率） #

Laravel的public磁盘默认映射到storage/app/public目录，执行php artisan storage:link创建软链后，该目录的公开访问前缀是/storage/，而非完整的/storage/app/public/。你当前的请求路径写错了，实际返回的是404错误页面的HTML内容，转成PDF自然无法打开。

修正后的请求地址应为：http://localhost:8000/storage/files/owwhz8JkFjyTuE4SNMytTKjXbVWLLIkaPnaSUF9b.pdf
你可以先把修正后的地址直接贴到浏览器地址栏访问，如果能正常打开PDF，说明路径问题已解决。

2. 前端Blob创建未指定MIME类型 #

你创建Blob实例时没有指定PDF对应的MIME类型，部分浏览器会识别错误导致文件损坏，修正后的完整代码如下：

methods: {
    downloadAttachment(file) {
      axios({
        // 第一步先修正访问路径
        url: 'http://localhost:8000/storage/files/owwhz8JkFjyTuE4SNMytTKjXbVWLLIkaPnaSUF9b.pdf',
        method: 'GET',
        responseType: 'blob',
      }).then((response) => {
        // 新增type参数指定PDF的MIME类型
        const url = window.URL.createObjectURL(new Blob([response.data], {type: 'application/pdf'}));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'file.pdf');
        document.body.appendChild(link);
        link.click();
        // 新增内存释放逻辑，避免性能问题
        window.URL.revokeObjectURL(url);
        document.body.removeChild(link);
      });
    }
  }

3. Laravel接口返回配置问题（仅适用于走API路由动态返回文件的场景） #

如果你的PDF是私有文件、不能公开访问，需要走Laravel接口鉴权后返回，需要确认以下配置：

• 返回文件时使用Laravel自带的response()->download()或者response()->file()方法，框架会自动设置正确的Content-Type等响应头
• 确保接口没有输出多余内容（比如调试打印的日志、代码末尾多余的换行/空格等），这些内容会附加到文件流中导致PDF损坏
• 确认接口没有被CSRF中间件拦截、没有权限校验返回错误响应，错误响应的JSON/HTML内容会被当成文件流写入，最终导致文件损坏

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