資訊專欄INFORMATION COLUMN
摘要：當前有一個需求前端對當前頁面的數(shù)據(jù)做篩選之后需要將其導出至文件且發(fā)送的請求需傳入需驗證的參數(shù)如頁面信息嘗試了提交及其他方法后出現(xiàn)亂碼等問題最后用成功完成了導出。直接貼代碼下面是解釋這段代碼不加會導致導出的出現(xiàn)亂碼問題。
當前有一個需求 前端對當前頁面的數(shù)據(jù)做篩選之后需要將其導出至excel文件
且發(fā)送的請求需傳入需驗證的參數(shù)如頁面token信息
嘗試了form提交及其他方法后出現(xiàn)excel亂碼等問題 最后用ajax成功完成了導出。
直接貼代碼：
下面是解釋：
xhr.responseType = "arraybuffer";
這段代碼不加會導致導出的excel出現(xiàn)亂碼問題。
xhr.onload內(nèi)操作如下：使用Blob的構(gòu)造函數(shù)并將取得的response數(shù)據(jù)作為Blob實例對象的第一個參數(shù)，接著這第二個參數(shù)type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"可以把表格格式保存為xlsx模式，還有一種是"application/vnd.ms-excel"老版本的用法不需要使用。
由于返回的response數(shù)據(jù)是二進制流數(shù)據(jù)所以需借助Blob對象將其轉(zhuǎn)化。另外可能還有其他js插件可以轉(zhuǎn)化這里就不做演示了。
然后創(chuàng)建下載地址以供下載。
最后在頁面新增臨時a標簽點擊下載之后remove移除這個dom即可
另外的代碼就是增加請求頭等需與后端溝通好的信息了
后端需要規(guī)定參數(shù)的話params里再加就好了，這邊傳了個空對象。
以上就是最近項目遇到的一點問題希望對讀完的您有幫助。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106117.html
摘要：目前導出方式占用內(nèi)存較大。比如有些狀態(tài)字段，數(shù)據(jù)庫存的就是數(shù)字或只占一個字節(jié)，完全換成中文狀態(tài)的話，可能達個字節(jié)甚至更多。若是必須要用中文形式。中文亂碼解決的話，其實也很簡單，函數(shù)，將轉(zhuǎn)為編碼，在中打開就不會錯了 問題描述：目前、一般情況下，在web開發(fā)過程中，使用導入導出報表的情形很多。我們先說導出。項目數(shù)據(jù)量多導出行數(shù)較多，50萬行左右，選擇的是csv方式導出。針對以下應(yīng)用場景，導...
摘要：方式請求的數(shù)據(jù)只能存放在內(nèi)存空間，可以通過訪問，但是無法保存到硬盤，因為不能直接和硬盤交互，否則將是一個安全問題。是第一個第三方的庫，所以同理。這里是返回的對象這里表示類型創(chuàng)建下載的鏈接下載后文件名點擊下載下載完成移除元素釋放掉對象 前言 我的項目中有一個需求：點擊按鈕生成可編輯的word文檔訂單詳情的信息我使用的前端框架是Vue.js、后臺使用的是node.jsnode.js生成和導...
摘要：具體的官方證據(jù)暫時還沒找到，只有下可傳輸?shù)母袷綖橄驴蓚鬏數(shù)母袷綖樗赃x擇有以下說服后端使用方式。 1.為什么要使用sumit post 下載 excel?最初做下載 就知道使用ajax 傳 參數(shù)過去,后發(fā)現(xiàn) 返回的值 那里顯示一堆亂碼,不觸發(fā)excleshowImg(https://segmentfault.com/img/bVboGGo?w=907&h=284); 至于為什么ajax...
摘要：具體的官方證據(jù)暫時還沒找到，只有下可傳輸?shù)母袷綖橄驴蓚鬏數(shù)母袷綖樗赃x擇有以下說服后端使用方式。 1.為什么要使用sumit post 下載 excel?最初做下載 就知道使用ajax 傳 參數(shù)過去,后發(fā)現(xiàn) 返回的值 那里顯示一堆亂碼,不觸發(fā)excleshowImg(https://segmentfault.com/img/bVboGGo?w=907&h=284); 至于為什么ajax...
閱讀 2492·2021-09-28 09:36
閱讀 3636·2021-09-22 15:41
閱讀 4456·2021-09-04 16:45
閱讀 2088·2019-08-30 15:55
閱讀 2876·2019-08-30 13:49
閱讀 853·2019-08-29 16:34
閱讀 2410·2019-08-29 12:57
閱讀 1706·2019-08-26 18:42
