1. 程式人生 > >關於Blob 前端下載檔案(例如excel)功能(主要用於vue 或者 ajax 前端下載)

關於Blob 前端下載檔案(例如excel)功能(主要用於vue 或者 ajax 前端下載)

公司前端使用的是vue,現在需要匯出excel,在網上查了一些資料,推薦用Blob
- 首先介紹一下Blob
一直以來,JS都沒有比較好的可以直接處理二進位制的方法。而Blob的存在,允許我們可以通過JS直接操作二進位制資料。
一個Blob物件就是一個包含有隻讀原始資料的類檔案物件。Blob物件中的資料並不一定得是JavaScript中的原生形式。File介面基於Blob,繼承了Blob的功能,並且擴充套件支援了使用者計算機上的本地檔案。
Blob物件可以看做是存放二進位制資料的容器,此外還可以通過Blob設定二進位制資料的MIME型別。

之前以為Blob需要二進位制檔案流,在後臺返回的時候返回二進位制,發現下載下來的內容不對,後來查了一下 java是可以直接返回Blob物件的

前端使用axios傳送請求

this.axios({
        method:'get',
        url:url,//後臺請求地址
        responseType:'blob',
      }).then((data) => {
        if (!data) {
            return
        }
        let url = window.URL.createObjectURL(data.data)
        let link = document.createElement('a')
        link.style.display = 'none'
link.href = url link.setAttribute('download', 'product.xls') document.body.appendChild(link) link.click() })

這裡重點是responseType:’blob’,加上這個之後後臺就會返回Blob物件

後臺程式碼 (java)

public DownloadResult exportXls(ActionContext ac){

        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd"
); ActionResult ar = new ActionResult(); JSONObject args = ac.getArguments(); String entityId = JsonUtil.getString(args, "entityId"); String date = JsonUtil.getString(args, "date"); DownloadResult localDownloadResult = new DownloadResult(); HttpServletResponse response = ac.getResponse(); String getDataSql = "select FProduct_name,FCustom_contact_name,FOrder_amount,FDeparture_date,FCreateTime,FPeopleNum from lpp_Order_table where FCreateTime >= '" + date + " 00:00:00' and FCreateTime <= '" + date + " 23:59:59' and FProductId = ? "; List<Record> dataRes = Executor.getInstance("default").getRecordList(getDataSql, entityId); ByteArrayOutputStream out = new ByteArrayOutputStream(); // OutputStream out = null; try { Workbook wb = new HSSFWorkbook(); //省略生成excel的程式碼 wb.write(out); byte[] array = out.toByteArray(); ar.putClientValue("data", array); localDownloadResult.setFileName("total.xls"); localDownloadResult.setContent(array); } catch(Exception ex) { ex.printStackTrace(); } finally { } return localDownloadResult; } }

DownloadResult 是我們公司平臺封裝的一個下載用的類,其實就是response在響應,返回值需要時二進位制byte[]陣列,這樣之後前端就可以下載到excel

相關推薦

關於Blob 前端下載檔案例如excel功能主要用於vue 或者 ajax 前端下載

公司前端使用的是vue,現在需要匯出excel,在網上查了一些資料,推薦用Blob - 首先介紹一下Blob 一直以來,JS都沒有比較好的可以直接處理二進位制的方法。而Blob的存在,允許我們可以通過JS直接操作二進位制資料。 一個Blob

檔案下載例如EXCEL匯出優化之防止使用者多次操作

問題簡介  在專案中客戶提出優化一下系統的匯出excel功能,由於有時候資料量比較大,伺服器查詢資料和生成檔案的事件可能會比較長,所以促使在匯出excel時頁面可能會長時間沒反應,使用者可能會以為系統卡頓就頻繁點選匯出按鈕。那麼我們需要在此期間不讓使用者重複操作,當檔案生成好了並且下

GridVIew中下載檔案的方法探討,方法7最佳。

(1)使用Button下載 在GridView屬性中新增: OnRowCommand="GridView1_RowCommand" 在GridView的<Column>中新增: <asp:ButtonField runat="server" Text="下載" HeaderText=

加@WebServlet註解後URI跳Servlet失敗例如驗證碼功能

剛做了一個登陸介面,用了WebServlet註解,發現驗證碼怎麼也重新整理不了,除錯之後發現根本沒有進入驗證碼生成的方法中去。這是我想肯定是註解或者XML檔案出問題了。我用了原始的在XML檔案中配置servlet. <servlet> <servlet-

上傳下載檔案、匯出excel

FileUploadController.javaimport org.json.JSONObject; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.b

前端實現多圖片上傳檢視功能帶UI實現

由於業務需求,需要實現多圖片的上傳,並且能夠實時檢視使用者上傳的圖片列表。因此從網上找了一個不錯的外掛,並和bootstrap UI進行的相容。基本能夠滿足需求。下面就是我的實現過程(PS:本人前端了解不太深,所以基本是實現了功能… UI沒有太多考慮…)

Java實現excel匯入功能1

今天要做一個Java實現excel匯入的功能,到網上看大神們寫的demo,都是超級麻煩,其實通常我們需要的只是一個很小很小的demo,搞清楚它的思路就行了,但是大神們寫的都是非常完善,甚至連線資料庫的程式碼都貼了出來。對於我們菜鳥來說,肯定不可能去把這大量的程式碼粘下來,甚

沒有任何型別 Test1 的外層例項可訪問。必須用型別 Test1 的外層例項例如,x.new A(),其中 x 是 Test1 的例項來限定分配。

在main方法中建立類Person,視為內部類,可以直接new Person,在main方法外建立的類,需要先例項化一個外層的物件A,再通過A.new來例項類Person package new_start1; public class Test1 { class Pe

Java文件復制器自己起的名字,主要用於數據搬遷,文件復制等中的使用

mage tac 緩沖區 png 參考 sta 基類 ade 轉換   學習Java在入門中期主要是通過api來學習,不要急慢慢來。 分下下需求,我們需要將文件從一個文件復制到另一個文件夾中 ,這其中我們可以使用很多方法,但在Java中我常用到的是io(廢話

手機H5頁面文字滾動、適配各種螢幕、jQuery ajax包含cookie

###手機H5頁面 ###文字滾動 使用li標籤,通過改變margin-top實現向上滾動。 程式碼: js: carousel: function() { var items = $('.roll').find('li'); console.log

Android中使用AsyncTask實現下載檔案動態更新進度條功能

1. 泛型AysncTask<Params, Progress, Result>Params:啟動任務時傳入的引數,通過呼叫asyncTask.execute(param)方法傳入。Progress:後臺任務執行的進度,若不用顯示進度條,則不需要指定。Result

Myeclipse10安裝Aptana主要用於js和jquery的編輯

Myeclipse10安裝Aptana 在實際專案開發中由於Myeclipse10編輯jsp和js的功能不夠強大,那麼我們需要引入第三方外掛,這樣Aptana外掛就是比較好的選擇,本文詳細介紹在Myeclipse10安裝Aptana外掛的過程和配置方法。

PHP將伺服器上的檔案下載例如下載Excel模板

   //下載模板(前提:此檔案在伺服器上)     public function down()     {         header("Content-type:text/html;charset=utf-8");         $file_name="example.xls";         

poi:讀取excel檔案模板並填入資料合併sheet並且下載

今天做一個到處excel的功能,涉及到多表查詢,然後讀取excel模板檔案並寫入查詢到的資料,並且要合併sheet,合併單元格,下載等功能,附上程式碼: Conreoller類: /**      * 匯出excel      */     public ModelAnd

Excel下載和讀取,部分代碼大神請路過

ans 功能實現 lena 瀏覽器 catch 完成後 spl dex AC A.下載Excel表或其他文件(運用瀏覽器自帶的功能實現下載) a) 前臺頁面: <a href="/SolidTransfers/DownloadFile" class="

實現從oss阿里雲伺服器以附件形式下載檔案含批量下載

轉載自:https://blog.csdn.net/sinat_28771747/article/details/53520253 筆者在專案中寫一個從阿里雲伺服器上面以附件形式下載檔案的介面時,遇到了問題,網上搜索無任何相關的解決方案,最後通過通過自己查閱API文件,再結合自己的經驗,實現了下

Postman高階應用8檔案變成了亂碼——下載檔案

背景 在做後臺管理系統時候,涉及到匯出報表等功能,如果我們用以前的方式請求,往往會看到返回一堆亂碼,而不是我們想要的檔案。其實Postman為我們提供了檔案下載功能,同樣普通的html文字和json資料也可以返回儲存為檔案。 實戰 點發送按鈕旁邊的三角形,然後點Send a

springboot上傳下載檔案3--java api 操作HDFS叢集+叢集配置

 只有光頭才能變強! 前一篇文章講了nginx+ftp搭建獨立的檔案伺服器 但這個伺服器宕機了怎麼辦? 我們用hdfs分散式檔案系統來解決這個問題(同時也為hadoop系列開個頭) 目錄 1、Ubuntu14.04下配置Hadoop(2.8.5)叢集環境詳解(完全分

前端檔案上傳一整套流程相容IE8,解決 input標籤必須主動點選等問題

1.基本思路 在谷歌下以<input type=’file’/>為基本的條件,並且使他隱藏,通過點選提交按鈕被動觸發上傳檔案的事件,這裡不需要用到表單提交的相關問題,在js方面,使用formData,通過獲取<input type=”file”>標籤的files屬性,來獲

Linux安裝rz、sz命令供SecureCRT上傳下載檔案

[[email protected] ~]# yum install lrzsz 如果顯示No package lrzsz available.Error: Nothing to do,則說明本地源找不到lrzsz包,需要手動下載並編譯安裝 [[email prot