nodejs(officegen)+vue(axios)在客戶端導出word文檔

前言

個人項目中有一個需求：點擊按鈕生成可編輯的word文檔訂單詳情的信息
我使用的前端框架是Vue.js、後臺使用的是node.js
node.js生成和導出word文檔我參考的是下面這兩篇文章，寫的挺好的（github上的那篇裏面還有node.js生成word、excel、ppt的example，須要詳細的能夠看裏面）
http://blog.csdn.net/liyanhui...
https://github.com/Ziv-Barber...

問題

node.js上面這兩篇文章已經講的很不錯了，可是我在實現的過程當中仍是出現了一個問題：我在後端能生成一個完整的word文檔，可是在返回前端下載的時候遇到了問題。一開始我一直都覺得node.js後臺方面的代碼致使的，畢竟我是第一次寫嘛^_^，可是在不斷的測試中我發現：
一、點擊按鈕用vue裏面的axios請求localhost:8081/order/getDoc沒有直接生成word文檔，把返回的數據console.log(res)出來查看，發現獲得的數據是一堆的亂碼的字符串
二、可是在瀏覽器地址欄中請求一樣的後端接口，發現能生成一個整個的word文檔！

問題根源

有了頭緒我就開始上網搜尋，我發現，ajax的接受類型只能是string字符串，不是流類型，因此沒法實現文件下載。ajax方式請求的數據只能存放在javascipt內存空間，能夠經過javascript訪問，可是沒法保存到硬盤，由於javascript不能直接和硬盤交互，不然將是一個安全問題。
axios是第一個第三方的ajax庫，因此同理。

解決方法

解決的方法我參考了一篇文章前端axios下載excel(二進制)https://www.cnblogs.com/xueji...

解決方法：利用了blob對象，Blob對象能夠看作是存放二進制數據的容器，它是一個二進制大對象，是一個能夠存儲二進制文件的容器。

methods:{
          handleClick(row){
            console.log(row);
            var orderId = row.orderId + row.oid.toString();
            console.log(orderId);
            this.$ajax({
              method:"get",
              url:"http://localhost:8081/order/getDoc",
              responseType:'blob'
            }).then((res)=>{
              //這裏res.data是返回的blob對象
              var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'}); //application/vnd.openxmlformats-officedocument.wordprocessingml.document這裏表示doc類型
              var downloadElement = document.createElement('a');
              var href = window.URL.createObjectURL(blob); //建立下載的連接
              downloadElement.href = href;
              downloadElement.download = orderId+'.docx'; //下載後文件名
              document.body.appendChild(downloadElement);
              downloadElement.click(); //點擊下載
              document.body.removeChild(downloadElement); //下載完成移除元素
              window.URL.revokeObjectURL(href); //釋放掉blob對象
            })
          }
     }