成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

Julylovin / 3098人閱讀

摘要：方式請(qǐng)求的數(shù)據(jù)只能存放在內(nèi)存空間，可以通過(guò)訪問(wèn)，但是無(wú)法保存到硬盤(pán)，因?yàn)椴荒苤苯雍陀脖P(pán)交互，否則將是一個(gè)安全問(wèn)題。是第一個(gè)第三方的庫(kù)，所以同理。這里是返回的對(duì)象這里表示類型創(chuàng)建下載的鏈接下載后文件名點(diǎn)擊下載下載完成移除元素釋放掉對(duì)象

前言

我的項(xiàng)目中有一個(gè)需求：點(diǎn)擊按鈕生成可編輯的word文檔訂單詳情的信息
我使用的前端框架是Vue.js、后臺(tái)使用的是node.js
node.js生成和導(dǎo)出word文檔我參考的是下面這兩篇文章，寫(xiě)的挺好的（github上的那篇里面還有node.js生成word、excel、ppt的example，需要詳細(xì)的可以看里面）
http://blog.csdn.net/liyanhui...
https://github.com/Ziv-Barber...

問(wèn)題

node.js上面這兩篇文章已經(jīng)講的很不錯(cuò)了，但是我在實(shí)現(xiàn)的過(guò)程中還是出現(xiàn)了一個(gè)問(wèn)題：我在后端能生成一個(gè)完整的word文檔，但是在返回前端下載的時(shí)候遇到了問(wèn)題。一開(kāi)始我一直都以為node.js后臺(tái)方面的代碼導(dǎo)致的，畢竟我是第一次寫(xiě)嘛^_^，但是在不斷的測(cè)試中我發(fā)現(xiàn)：
1、點(diǎn)擊按鈕用vue里面的axios請(qǐng)求localhost:8081/order/getDoc沒(méi)有直接生成word文檔，把返回的數(shù)據(jù)console.log(res)出來(lái)查看，發(fā)現(xiàn)得到的數(shù)據(jù)是一堆的亂碼的字符串
2、但是在瀏覽器地址欄中請(qǐng)求同樣的后端接口，發(fā)現(xiàn)能生成一個(gè)整個(gè)的word文檔！

問(wèn)題根源

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

解決方法

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

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

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對(duì)象
              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(); //點(diǎn)擊下載
              document.body.removeChild(downloadElement); //下載完成移除元素
              window.URL.revokeObjectURL(href); //釋放掉blob對(duì)象
            })
          }
     }

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/93439.html

相關(guān)文章

  • vue導(dǎo)出html、word和pdf

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

    malakashi 評(píng)論0 收藏0

  • node 使用第三方api 生成 word 文檔之修改源碼實(shí)現(xiàn)需求

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

    luckyyulin 評(píng)論0 收藏0

  • vue開(kāi)發(fā)項(xiàng)目完全指南

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

    leoperfect 評(píng)論0 收藏0

  • 封裝框架的實(shí)踐

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

    Dogee 評(píng)論0 收藏0

  • 【Geek議題】合理的VueSPA架構(gòu)討論（上）

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

    worldligang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<