vue使用asiox 下載后端返回的excel數據流

一、前端代碼

<template><div class="hello"><h1>{{ msg }}</h1><button style="color: brown" @click="exportExcel">excel導出</button></div>
</template><script>
import axios from "axios";export default {name: "HelloWorld",props: {msg: String,},methods: {exportExcel() {//請求console.log("test");axios.post("/api/export", {}, { responseType: "blob" }).then((res) => {//請求成功,觸發then中的函數console.log(res);const blob = new Blob([res.data], {type: "application/vnd.ms-excel",});// 獲取 獲取響應頭 heads 中的 filename 文件名let temp = res.headers["content-disposition"].split(";")[1].split("filename=")[1];// 把 %E9%AB%98%E6%84%8F%E5%90%91%E5%AD%A6%E5%91%98303.xlsx 轉化成文字var fileName = decodeURIComponent(temp);//創建一個 a 標簽const link = document.createElement("a");//不顯示a標簽link.style.display = "none";// 給a 標簽的href屬性賦值link.href = URL.createObjectURL(blob);link.setAttribute("download", fileName);//把a標簽插入頁面中document.body.appendChild(link);link.click();//點擊之后移除a標簽document.body.removeChild(link);}).catch((error) =>//請求失敗,觸發catch中的函數 可省略console.log(error));},},
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

二、后端代碼

    @PostMapping("/export")public void download(HttpServletResponse response) throws IOException {response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");response.setCharacterEncoding("utf-8");// 這里URLEncoder.encode可以防止中文亂碼String fileName = URLEncoder.encode("交付對象及機構信息關系表", "UTF-8").replaceAll("\\+", "%20");response.setHeader("Content-disposition", "attachment;filename=" + fileName + ".xlsx");//自行編寫查詢數據庫數據List<DataOrganizationDrugRelationExport> list = Lists.newArrayList();EasyExcel.write(response.getOutputStream(), DataOrganizationDrugRelationExport.class).head(DataOrganizationDrugRelationHeader.class).sheet("結果").doWrite(list);}

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/18322.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/18322.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/18322.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

awk編輯器

目錄 工作原理 命令格式 普通格式 BEGIN格式 語句循環格式 awk常見的內建變量&#xff08;可直接用&#xff09; 按行打印行內容 統計行數量 按字段輸出文本 通過管道、雙引號調用 Shell 命令 awk編輯器是一種流編輯器 工作原理 逐行讀取文本,默認以空格或tab鍵為分…

二叉樹,先序遍歷、中序遍歷、后序遍歷和層序遍歷實現 C++

二叉樹基類聲明 template<typename T>class Tree{protected:Tree() default;virtual ~Tree() default;virtual const Tree& root()const 0;virtual Tree& root() 0;virtual const Tree& left()const 0;virtual const Tree& right()const 0;virtua…

java第十八課 —— 重載、可變參數

方法重載 基本介紹 java 中允許同一個類中&#xff0c;多個同名方法的存在&#xff0c;但要求形參列表不一致&#xff01; 比如&#xff1a;System.out.println(); out 是 PrintStream 類型 重載的好處 減輕了起名的麻煩減輕了記名的麻煩 注意事項和使用細節 方法名&…

【Vue】Vue2中的Vuex

目錄 Vuex介紹Vuex 中的核心概念 在vue2中使用Vuex安裝 Vuex創建一個 Vuex Store在 Vue 實例中使用 Vuex編寫 Vuex 的 state、mutations 和 actions在組件中使用 Vuex Vuex的核心State組件中獲取 Vuex 的狀態mapState 輔助函數對象展開運算符 Getter基本使用示例 通過屬性訪問通…

從多站點到多活,XEOS 對象數據容災能力再提升

近日&#xff0c; XSKY SDS V6.4 新版本發布&#xff0c;其中 XEOS V6.4 全新升級并完善了統一命名空間功能&#xff0c;更進一步增強和完善了異地容災方案&#xff0c;配合強一致代理讀&#xff0c;可以實現異地多活&#xff1b;同時大幅降低管理復雜度&#xff0c;有效降低容…

Nginx中的limit_req模塊和limit_conn模塊詳解

引言 在高流量場景下&#xff0c;良好的限流和連接控制策略至關重要&#xff0c;以防止服務器過載&#xff0c;確保服務穩定性和高可用性。Nginx 提供了 limit_req 和 limit_conn 模塊&#xff0c;用以實現請求頻率和并發連接數的限制。本文將詳細介紹這兩個模塊的生效階段和生…

TikTok電商帶貨特訓營,跟隨時代潮流,跨境掘金(8節課)

課程內容&#xff1a; 1-先導課 2-一、店鋪運營認知與思路 3-二、店鋪風控注意事項 4-三、美區Tiktok前期工作-1店鋪入駐模式 5-三、美區Tiktok前期工作-2指紋瀏覽器介紹 6-三、美區Tiktok前期工作-4綁定電話號碼 7-三、美區Tiktok前期工作-5添加倉庫地址 8-三、美區Ti…

GIS讀研與求職準備:植被定量遙感專業研0

本文介紹植被定量遙感專業研究生入學初期&#xff0c;為將來從事開發類工作所作求職準備的規劃路徑、方向選擇等方面的建議。 前面提到了&#xff0c;最近有很多師弟師妹詢問關于研究生方向選擇、求職準備等方面的問題。因為很多朋友的提問比較有共性&#xff0c;所以會在征得對…

【秒殺系統】從零開始打造簡易秒殺系統(一):防止超賣

【秒殺系統】從零開始打造簡易秒殺系統&#xff08;一&#xff09;&#xff1a;防止超賣 前言 大家好&#xff0c;好久不發文章了。&#xff08;快一個月了- -&#xff09;最近有很多學習的新知識想和大家分享&#xff0c;但無奈最近項目蠻忙的&#xff0c;很多文章寫了一半擱…

redis筆記1

1-nosql&#xff08;非關系型數據庫&#xff09; 定位緩存&#xff0c;提高數據讀寫速度&#xff0c;減輕對數據儲存與訪問壓力&#xff0c;不建議存敏感數據&#xff08;重要數據&#xff09;。 2-特征 &#xff08;1&#xff09;鍵值&#xff08;key-value&#xff09;型 &a…

【面試】Oracle JDK和Open JDK什么關系?

目錄 1. 起源與發展2. 代碼與許可3. 功能與組件4. 使用場景5. 版本更新與支持 1. 起源與發展 1.Oracle JDK是由Oracle公司基于Open JDK源代碼開發的商業版本。2.Open JDK是java語言的一個開源實現。 2. 代碼與許可 1.Oracle JDK包含了閉源組件&#xff0c;并根據二進制代碼許…

深入Java:JSON解析與操作的藝術

哈嘍&#xff0c;大家好&#xff0c;我是木頭左&#xff01; 一、初識JSON&#xff1a;數據格式的優雅舞者 在現代Web開發中&#xff0c;JSON&#xff08;JavaScript Object Notation&#xff09;以其輕量級和易于閱讀的特點成為了數據交換的首選格式。它基于JavaScript的一個…

用最通俗的話理解什么是協程

參考&#xff1a; 用最通俗的話理解什么是協程-CSDN博客

FreeRTOS_信號量_學習筆記

信號量的特性 消息隊列用于傳輸多個數據&#xff0c;但是有時候我們只需要傳遞狀態&#xff0c;這個狀態值需要用一個數值表示。套用隊列筆記中的流水線例子&#xff0c;可以理解為流水線上工件的數量。 信號&#xff1a;起通知作用 量&#xff1a;還可以用來表示資源的數量 當…

打印機手動雙面打印技巧

一、WORD和PDF &#xff08;1&#xff09;首先選擇要打印的頁面范圍&#xff0c;然后選擇僅奇數頁打印 &#xff08;2&#xff09;將打印完的紙張翻過來&#xff0c;白紙朝上&#xff0c;紙張的頭部先放入打印機 &#xff08;3&#xff09;選擇要打印的頁面范圍&#xff0c;然…

oracle.jdbc.OracleDatabaseException: ORA-00911: 無效字符

先吐槽一句&#xff0c;oracle 真坑啊&#xff01; 一個很正常的sql 語句一直報 ORA-00911: 無效字符 &#xff0c;拿到數據庫去執行一點問題沒有&#xff0c;一運行代碼就報錯&#xff0c;然后一個字符一個字符的對比&#xff0c;竟然是因為sql 結尾的一個 ";" 導致…

TP6開發文檔概述

TP6&#xff08;ThinkPHP 6&#xff09;是一個使用PHP語言開發的快速、兼容且簡單的面向對象開發框架。以下是一個簡化的TP6開發文檔概述&#xff0c;涵蓋了核心功能和一些常用方法&#xff1a; 一、環境準備 PHP安裝&#xff1a;確保已經安裝了與TP6兼容的PHP版本。 Composer…

PHPIPAM在建立數據庫階段報錯

如題&#xff0c;參考大佬的操作IP地址管理系統phpipam部署-CSDN博客搭建PHPIPAM&#xff0c;不過我沒有選擇1.4&#xff0c;而是直接搭建了1.6版本&#xff0c;一切順利&#xff0c;到了最后建立數據庫階段&#xff0c;輸入數據庫賬號和密碼后提示Cannot install sql SCHEMA f…

大模型部署_書生浦語大模型 _作業2

本節課可以讓同學們實踐 4 個主要內容&#xff0c;分別是&#xff1a; 1、部署 InternLM2-Chat-1.8B 模型進行智能對話 1.1安裝依賴庫&#xff1a; pip install huggingface-hub0.17.3 pip install transformers4.34 pip install psutil5.9.8 pip install accelerate0.24.1…

Elasticsearch之文本分析

文本分析基本概念 官網&#xff1a;Text analysis | Elasticsearch Guide [7.17] | Elastic 官網稱為文本分析&#xff0c;這是對文本進行一直分析處理的方式&#xff0c;基本處理邏輯是為按照預先制定的分詞規則&#xff0c;把原本的文檔進行分割成多個小顆粒度的詞項&#x…