vue中下載文件后無法打開的坑

今天在項目開發的時候臨時要添加個導出功能我就寫了一份請求加導出得代碼,

代碼:

    //導出按鈕放開exportDutySummarizing (dataRangeInfo) {const params = {departmentName: dataRangeInfo.name,departmentQode: dataRangeInfo.qode}//拼接所需得urlconst baseUrl = Constants.SERVICES.duty + Constants.DUTY_SUMMARIZING_EXPORTthis.$axios({method: 'POST',url: utils.strFormat(baseUrl, {departmentName: params.departmentName,departmentQode: params.departmentQode}),headers: {Authorization: 'bearer ' + Cookies.get('Access-Token'),//token'Content-Type': 'application/json'},responseType: 'blob',//類型 這個必須要data: {//參數a: '1'}}).then((response) => {//公共的下載方法 在下面展示utils.download(response, dataRangeInfo.name + '名字.xlsx')}).catch(() => { })}//公共的下載方法util.download = function (data, filename) {if (!data && !filename) {return}let url = window.URL.createObjectURL(new Blob([data]))let link = document.createElement('a')link.style.display = 'none'link.href = urllink.setAttribute('download', filename)document.body.appendChild(link)link.click()}

?到這里請求文件流和導出文件得方法都已經寫完了,這里面有的坑呢 打開就是返回得數據,大概就是你new Blob([data])得時候這個data是否是文件流,這個例子后端直接給我返回了文件流所以就直接使用了 一邊都是res.data這樣使用,再有就是responseType: 'blob',這個在請求文件流時請求頭中必須要寫,其他就沒什么了。

如果到這里下載下來的文件還是無法打開請往下看

下面就要說的就是mockjs了

mockjs 會攔截axios, 初始化的時候給攔截響應設置了 responseType: ' ',

所以只需要把 mockjs注釋掉或者在.env把VUE_APP_BUILD_MODE設置成nomock中就可以了.

改完記得重啟項目!

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

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

相關文章

UserRole

Qt::UserRole 是 Qt::ItemDataRole 枚舉中的一個成員,用于表示自定義數據角色(Data Role)的起始值。 在 Qt 中,Qt::ItemDataRole 枚舉用于標識項(Item)中不同類型的數據。這些數據角色包括 Qt::DisplayRol…

目標檢測YOLO系列從入門到精通技術詳解100篇-【目標檢測】紅外熱成像

目錄 前言 知識儲備 紅外熱成像儀基礎知識 算法原理 紅外熱成像探測距離 紅外圖像增強

第一百七十八回 介紹一個三方包組件:SlideSwitch

文章目錄 1. 概念介紹2. 使用方法3. 代碼與效果3.1 示例代碼3.2 運行效果 4. 內容總結 我們在上一章回中介紹了"如何創建垂直方向的Switch"相關的內容,本章回中將 介紹SlideSwitch組件.閑話休提,讓我們一起Talk Flutter吧。 1. 概念介紹 我們…

多功能智能燈桿主要功能有哪些?

多功能智能燈桿這個詞相信大家都不陌生,最近幾年多功能智能燈桿行業發展迅速,迅速取代了傳統路燈,那么多功能智能燈桿相比傳統照明路燈好在哪里呢,為什么大家都選擇使用叁仟智慧多功能智能燈桿呢?所謂多功能智能燈桿著…

【libGDX】Mesh紋理貼圖

1 前言 紋理貼圖的本質是將圖片的紋理坐標與模型的頂點坐標建立一一映射關系。紋理坐標的 x、y 軸正方向分別朝右和朝下,如下。 2 紋理貼圖 本節將使用 Mesh、ShaderProgram、Shader 實現紋理貼圖,OpenGL ES 的實現見博客 → 紋理貼圖。 DesktopLauncher…

超級應用平臺(HAP)起航

各位明道云用戶和伙伴, 今天,我們正式發布明道云10.0版本。從這個版本開始,我們將產品名稱正式命名為超級應用平臺(Hyper Application Platform, 簡稱HAP)。我們用“超級”二字表達產品在綜合能力方面的突破&#xff…

清華系下一代 LCM

LCM LoRA模型是一種創新的深度學習模型,它通過特殊的技術手段,顯著提高了圖像生成的效率。這種模型特別適用于需要快速生成高質量圖像的場景,如藝術創作、實時圖像處理等。 GitHub - luosiallen/latent-consistency-model: Latent Consistenc…

視頻監控中的智能算法與計算機視覺技術

智能視頻監控是一種基于人工智能技術的監控系統,它能夠通過對圖像和視頻數據進行分析,自動識別目標物體、判斷其行為以及進行異常檢測等功能,從而實現對場景的智能化監管。以下是常見的一些用于智能視頻監控的算法: 1、人臉識別技…

RabbitMQ簡易安裝

一般來說安裝 RabbitMQ 之前要安裝 Erlang ,可以去Erlang官網下載。接著去RabbitMQ官網下載安裝包,之后解壓縮即可。 Erlang官方下載地址:Downloads - Erlang/OTP RabbitMQ官方下載地址:Downloading and Installing RabbitMQ —…

org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder

密碼,加密,解密 spring-security-crypto-5.7.3.jar /** Copyright 2002-2011 the original author or authors.** Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in compliance with t…

Kafka(一)

一:簡介 解決高吞吐量項目的需求 是一款為大數據而生的消息中間件,具有百億級tps的吞吐量,在數據采集、傳輸、存儲的過程中發揮著作用 二:為什么要使用消息隊列 一個普通訪問量的接口和一個大并發的接口,它們背后的…

C/C++---------------LeetCode第1512. 好數對的數目

好數對的數目 題目及要求暴力算法哈希算法在main內使用 題目及要求 給你一個整數數組 nums 。 如果一組數字 (i,j) 滿足 nums[i] nums[j] 且 i < j &#xff0c;就可以認為這是一組 好數對 。 返回好數對的數目。 示例 1&#xff1a; 輸入&#xff1a;nums [1,2,3,1,…

376.擺動序列

原題鏈接&#xff1a;376.擺動序列 全代碼&#xff1a; class Solution { public:int wiggleMaxLength(vector<int>& nums) {if (nums.size() < 1) return nums.size();int curDiff 0; // 當前一對差值int preDiff 0; // 前一對差值int result 1; // 記錄峰…

Android骨架圖

用法&#xff1a;在圖片上實現動畫效果 <FrameLayoutandroid:id"id/image_container"android:layout_width"match_parent"android:layout_height"wrap_content"><ImageViewandroid:id"id/ivBlank"android:layout_width"…

PostgreSQL Patroni 3.0 新功能規劃 2023年 紐約PG 大會 (音譯)

開頭還是介紹一下群&#xff0c;如果感興趣PolarDB ,MongoDB ,MySQL ,PostgreSQL ,Redis, Oceanbase, Sql Server等有問題&#xff0c;有需求都可以加群群內有各大數據庫行業大咖&#xff0c;CTO&#xff0c;可以解決你的問題。加群請聯系 liuaustin3 &#xff0c;&#xff08;…

React Hooks函數之useRef

useRef 是 React 中常用的 Hook 之一&#xff0c;它返回一個可變的 ref 對象&#xff0c;其 .current 屬性被初始化為傳入的參數&#xff08;initialValue&#xff09;。返回的 ref 對象在組件的整個生命周期內保持不變。 以下是一些使用 useRef 的場景和示例&#xff1a; 1、…

Mathorcup數學建模競賽第一屆-【媽媽杯】B題:圖像識別

目錄 知識儲備 傳統圖像處理方法進行瑕疵檢測 傳統算法方向的選擇 瑕疵檢測關注的兩個問題 瑕疵的標注

【技術分享】RK3399 Ubuntu通過Python實現錄音和播放功能

?本文基于IDO-SBC3968 Ubuntu 系統通過Python腳本實現錄音和播放功能。 IDO-SBC3968采用RK3399國產六核64位CPU高性能處理器&#xff0c;支持4K HDMI2.0顯示&#xff0c;接口豐富&#xff0c;擁有千兆以太網&#xff0c;全協議TypeC接口&#xff0c;USB3.0 &#xff0c;eDP 和…

Redis高并發緩存架構

前言&#xff1a; 針對緩存我們并不陌生&#xff0c;而今天所講的是使用redis作為緩存工具進行緩存數據。redis緩存是將數據保存在內存中的&#xff0c;而內存的珍貴性是不可否認的。所以在緩存之前&#xff0c;我們需要明確緩存的對象&#xff0c;是否有必要緩存&#xff0c;怎…

ElasticSearch之配置

ElasticSearch主要的配置文件&#xff0c;如下&#xff1a; elasticsearch.yml&#xff0c;ElasticSearch的相關參數。jvm.options&#xff0c;JVM的相關參數。log4j2.properties&#xff0c;日志的相關參數。 默認情況下&#xff0c;ElasticSearch從$ES_HOME/config目錄下讀…