Laravel 10+Vue3生成docx文件下载后损坏问题求助

我使用Laravel 10.x、Vue.js 3.x和PHPWord包生成DOCX文件，下载后文件损坏无法打开。已尝试添加ob_end_clean()（常见的Laravel文件下载损坏修复方案）但无效，且通过scp下载服务器上生成好的文件完全正常，说明问题出在响应环节，而非文件生成或保存环节。

原代码 #

Vue.js 代码 #

const getFile = async () => {
   try {
      let response = await axios.get('api/docx', { responseType: 'blob' });
      let blob = new Blob([response.data]);
      let link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = 'test.docx';
      document.body.appendChild(link);
      link.click();
   } catch (e) {
      alert(e);
   }
}

Laravel 代码 #

public function getFile() {
   $doc = new TemplateProcessor(storage_path() . '/app/public/test_template.docx');
   $doc->setValue('random_text', 'Foo');
   $doc->saveAs(storage_path() . '/app/public/test.docx');
   
   ob_end_clean();
   $headers = array('Content-Type: application/vnd.openxmlformats-officedocument.wordprocessingml.document');
   return response()->download(storage_path() . '/app/public/test.docx', 'test.docx', $headers);
}

解决方法 #

1. 彻底清空Laravel输出缓冲区 #

单次ob_end_clean()可能无法清空所有层级的输出缓冲区，改用循环确保完全清空：

public function getFile() {
   $doc = new TemplateProcessor(storage_path('app/public/test_template.docx'));
   $doc->setValue('random_text', 'Foo');
   $filePath = storage_path('app/public/test.docx');
   $doc->saveAs($filePath);

   // 清空所有层级的输出缓冲区
   while (ob_get_level()) {
       ob_end_clean();
   }

   // Laravel的download方法会自动处理Content-Type，无需手动设置
   return response()->download($filePath, 'test.docx')->deleteFileAfterSend(true);
}

同时开启deleteFileAfterSend(true)可以自动清理服务器上的临时文件，避免冗余存储。

2. 优化Vue端Blob处理逻辑 #

给Blob指定明确的MIME类型，并添加请求头确保服务端返回正确内容，同时清理下载后的DOM对象：

const getFile = async () => {
   try {
      const response = await axios.get('api/docx', { 
         responseType: 'blob',
         headers: { Accept: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' }
      });
      // 指定Blob的MIME类型，避免编码错误
      const blob = new Blob([response.data], { 
         type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' 
      });
      const link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = 'test.docx';
      document.body.appendChild(link);
      link.click();
      // 释放URL对象，清理DOM节点
      window.URL.revokeObjectURL(link.href);
      document.body.removeChild(link);
   } catch (e) {
      console.error(e);
      alert('文件下载失败');
   }
}

3. 排查中间件额外输出 #

检查项目中的中间件（如日志、CORS、自定义中间件）是否在响应前输出了空格、字符或BOM头，这些额外内容会污染DOCX文件的二进制数据，导致文件损坏。可临时禁用非必要中间件进行测试。

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