資訊專欄INFORMATION COLUMN
摘要：方式請求的數據只能存放在內存空間，可以通過訪問，但是無法保存到硬盤，因為不能直接和硬盤交互，否則將是一個安全問題。是第一個第三方的庫，所以同理。這里是返回的對象這里表示類型創建下載的鏈接下載后文件名點擊下載下載完成移除元素釋放掉對象
前言
我的項目中有一個需求：點擊按鈕生成可編輯的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對象
})
}
}
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93439.html
摘要：導出的頁面組件如下導出方法獲取要導出的組件頁面的把它設置成變量一文本并通過導出獲取要導出組件頁面的的標簽代碼，通過獲取，也可以通過獲得構造頁面，并使用構造一個文件流并下載，如下具體代碼如下的簡歷獲取另外一種方式迅聘選才導出 導出的頁面組件如下： 1、導出html 方法：1）獲取要導出的組件頁面的css把它設置成js變量一文本并通過export導...
摘要：使用了第三方實現生成文檔，但是發現下劃線無法滿足需求。修改源碼以便后人踩坑以下是我的一個，通過傳參數設置下劃線顏色以及高度。 使用了 officegen 第三方 api 實現生成word 文檔，但是發現下劃線無法滿足需求。修改源碼以便后人踩坑,以下是我的一個demo，通過傳參數設置下劃線顏色以及高度。本demo 通過json 配置方式，還有api 調用方式實現方式，詳細可以參考git ...
摘要：有兩種方法，一種是在開發環境中設置通過的，另一種是在服務器上修改的配置設置。這樣我們以后使用訪問接口就可以不加了，打包后訪問也不用手動去除統一管理在項目開發過程中，會涉及到很多接口的處理，當項目足夠大時，就需要統一管理接口。 這篇文章總結了vue項目的所遇到的問題，包括跨域、用戶認證、接口統一管理、路由配置、兼容性處理，性能優化等內容。 項目github地址 : 前端 https:...
摘要：下面也是以模塊的模塊集為例，可以發現和路由有一些不同就是這里為了防止模塊跟全局耦合，運用函數式編程思想類似于依賴注入，將全局的實例作為函數參數傳入，再返回出一個包含的對象，這個導出的對象將會被以模塊名命名，合并到全局的集中。 前言 web前端發展到現代，已經不再是嚴格意義上的后端MVC的V層，它越來越向類似客戶端開發的方向發展，已獨立擁有了自己的MVVM設計模型。前后端的分離也使前端人...
閱讀 1357·2021-09-02 10:19
閱讀 1101·2019-08-26 13:25
閱讀 2108·2019-08-26 11:37
閱讀 2413·2019-08-26 10:18
閱讀 2676·2019-08-23 16:43
閱讀 2989·2019-08-23 16:25
閱讀 775·2019-08-23 15:53
閱讀 3297·2019-08-23 15:11
