前言

我的項目中有一個需求：點擊按鈕生成可編輯的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后臺方面的代碼導致的，畢竟我是第一次寫嘛^_^，但是在不斷的測試中我發現：

1、點擊按鈕用vue里面的axios請求localhost:8081/order/getDoc沒有直接生成word文檔，把返回的數據console.log(res)出來查看，發現得到的數據是一堆的亂碼的字符串

2、但是在瀏覽器地址欄中請求同樣的后端接口，發現能生成一個整個的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對象

})

}

}

總結

以上是生活随笔為你收集整理的vue 生产word_nodejs(officegen)+vue(axios)在客户端导出word文档的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。