系統(tǒng)前端是使用vue3+element Ui開發(fā)的。所以請求用到axios。其中設(shè)置responseType。responseType 表示服務器響應的數(shù)據(jù)類型，可以是 ‘arraybuffer’, ‘blob’, ‘document’, ‘json’, ‘text’, ‘stream’。默認的 responseType: ‘json’,

而axios下載文件需要設(shè)置responseType: ‘blob’,

  axios.post(url, data, { headers: { 'X-CSRF-TOKEN': this.token }, responseType: 'blob' })
    .then((res) => {
      const { data, headers } = res
      const contentDisposition = headers['content-disposition']
      const patt = new RegExp('filename=([^;]+\.[^\.;]+);*')
      const result = patt.exec(contentDisposition)
      const filename = decodeURI(JSON.parse(result[1])) // 處理文件名,解決中文亂碼問題
      const blob = new Blob([data], { type: headers['content-type'] })
      let dom = document.createElement('a')
      let url = window.URL.createObjectURL(blob)
      dom.href = url
      dom.download = decodeURI(filename)
      dom.style.display = 'none'
      document.body.appendChild(dom)
      dom.click()
      dom.parentNode.removeChild(dom)
      window.URL.revokeObjectURL(url)
    }).catch((err) => { })

PHP處理代碼

后端方面的代碼如下。Talk is cheap, show me the code.

    public function contract()
    {
        $tmp=new \PhpOffice\PhpWord\TemplateProcessor('static/wordfile/contract.docx');//打開模板
        $tmp->setValue('name', '君常笑');//替換變量name
        $tmp->setValue('mobile', '12');//替換變量mobile
        $tmp->saveAs('../tempfile/簡歷.docx');//另存為
        $file_url = '../tempfile/簡歷.docx';
        $file_name=basename($file_url);
        $file_type=explode('.', $file_url);
        $file_type=$file_type[count($file_type)-1];
        $file_type=fopen($file_url, 'r'); //打開文件
        //輸入文件標簽
        header("Content-type: application/octet-stream");
        header("Accept-Ranges: bytes");
        header("Accept-Length: ".filesize($file_url));
        header("Content-Disposition:attchment; filename=" . json_encode('合同.docx'));
        //輸出文件內(nèi)容
        echo fread($file_type, filesize($file_url));
        fclose($file_type);
    }