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

Julylovin 發(fā)布于2019-08-22 15:24 / 3041人閱讀

摘要：方式請求的數(shù)據(jù)只能存放在內(nèi)存空間，可以通過訪問，但是無法保存到硬盤，因為不能直接和硬盤交互，否則將是一個安全問題。是第一個第三方的庫，所以同理。這里是返回的對象這里表示類型創(chuàng)建下載的鏈接下載后文件名點擊下載下載完成移除元素釋放掉對象

前言

我的項目中有一個需求：點擊按鈕生成可編輯的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上面這兩篇文章已經(jīng)講的很不錯了，但是我在實現(xiàn)的過程中還是出現(xiàn)了一個問題：我在后端能生成一個完整的word文檔，但是在返回前端下載的時候遇到了問題。一開始我一直都以為node.js后臺方面的代碼導致的，畢竟我是第一次寫嘛^_^，但是在不斷的測試中我發(fā)現(xiàn)：
1、點擊按鈕用vue里面的axios請求localhost:8081/order/getDoc沒有直接生成word文檔，把返回的數(shù)據(jù)console.log(res)出來查看，發(fā)現(xiàn)得到的數(shù)據(jù)是一堆的亂碼的字符串
2、但是在瀏覽器地址欄中請求同樣的后端接口，發(fā)現(xiàn)能生成一個整個的word文檔！

問題根源

有了頭緒我就開始上網(wǎng)搜尋，我發(fā)現(xiàn)，ajax的接受類型只能是string字符串，不是流類型，所以無法實現(xiàn)文件下載。ajax方式請求的數(shù)據(jù)只能存放在javascipt內(nèi)存空間，可以通過javascript訪問，但是無法保存到硬盤，因為javascript不能直接和硬盤交互，否則將是一個安全問題。
axios是第一個第三方的ajax庫，所以同理。

解決方法

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

解決方法：利用了blob對象，Blob對象可以看做是存放二進制數(shù)據(jù)的容器，它是一個二進制大對象，是一個可以存儲二進制文件的容器。

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); //創(chuàng)建下載的鏈接
              downloadElement.href = href;
              downloadElement.download = orderId+".docx"; //下載后文件名
              document.body.appendChild(downloadElement);
              downloadElement.click(); //點擊下載
              document.body.removeChild(downloadElement); //下載完成移除元素
              window.URL.revokeObjectURL(href); //釋放掉blob對象
            })
          }
     }

云服務器 GPU云服務器 word導出 freemarker導出word poi導出word java導出word

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93439.html

vue導出html、word和pdf

摘要：導出的頁面組件如下導出方法獲取要導出的組件頁面的把它設置成變量一文本并通過導出獲取要導出組件頁面的的標簽代碼，通過獲取，也可以通過獲得構造頁面，并使用構造一個文件流并下載，如下具體代碼如下的簡歷獲取另外一種方式迅聘選才導出導出的頁面組件如下： 1、導出html 方法：1）獲取要導出的組件頁面的css把它設置成js變量一文本并通過export導...

malakashi 2019-08-23 10:31 評論0 收藏0
node 使用第三方api 生成 word 文檔之修改源碼實現(xiàn)需求

摘要：使用了第三方實現(xiàn)生成文檔，但是發(fā)現(xiàn)下劃線無法滿足需求。修改源碼以便后人踩坑以下是我的一個，通過傳參數(shù)設置下劃線顏色以及高度。使用了 officegen 第三方 api 實現(xiàn)生成word 文檔，但是發(fā)現(xiàn)下劃線無法滿足需求。修改源碼以便后人踩坑,以下是我的一個demo，通過傳參數(shù)設置下劃線顏色以及高度。本demo 通過json 配置方式，還有api 調(diào)用方式實現(xiàn)方式，詳細可以參考git ...

luckyyulin 2019-08-23 14:44 評論0 收藏0
vue開發(fā)項目完全指南

摘要：有兩種方法，一種是在開發(fā)環(huán)境中設置通過的，另一種是在服務器上修改的配置設置。這樣我們以后使用訪問接口就可以不加了，打包后訪問也不用手動去除統(tǒng)一管理在項目開發(fā)過程中，會涉及到很多接口的處理，當項目足夠大時，就需要統(tǒng)一管理接口。這篇文章總結了vue項目的所遇到的問題，包括跨域、用戶認證、接口統(tǒng)一管理、路由配置、兼容性處理，性能優(yōu)化等內(nèi)容。項目github地址 : 前端 https:...

leoperfect 2019-08-23 16:16 評論0 收藏0
封裝框架的實踐

摘要：最近在嘗試著封裝一個框架，礙于種種原因，先從簡單的入手吧?；诤头庋b的框架，集成數(shù)據(jù)存儲字體圖標庫拓展語言網(wǎng)絡請求等模塊，為了讓業(yè)務開發(fā)更專注于數(shù)據(jù)驅(qū)動。最近在嘗試著封裝一個框架，礙于種種原因，先從簡單的入手吧。基于vue和elementUI封裝的框架，集成數(shù)據(jù)存儲localforage、字體圖標庫font-awesome、css拓展語言scss、網(wǎng)絡請求axios等模塊，為了讓業(yè)...

Dogee 2019-08-23 13:57 評論0 收藏0
【Geek議題】合理的VueSPA架構討論（上）

摘要：下面也是以模塊的模塊集為例，可以發(fā)現(xiàn)和路由有一些不同就是這里為了防止模塊跟全局耦合，運用函數(shù)式編程思想類似于依賴注入，將全局的實例作為函數(shù)參數(shù)傳入，再返回出一個包含的對象，這個導出的對象將會被以模塊名命名，合并到全局的集中。前言 web前端發(fā)展到現(xiàn)代，已經(jīng)不再是嚴格意義上的后端MVC的V層，它越來越向類似客戶端開發(fā)的方向發(fā)展，已獨立擁有了自己的MVVM設計模型。前后端的分離也使前端人...

worldligang 2019-08-22 15:53 評論0 收藏0