前言:这篇文件下载的后台代码太繁琐,建议参考https://www.cnblogs.com/zwh0910/p/13745947.html

前端:

 <el-button
type="primary"
icon="el-icon-download"
@click="downloadTemplate('药品清单-模板.xlsx')">下载模板</el-button>

在main.js中:

import fileDownload from 'js-file-download'

Vue.prototype.downloadTemplate = function (templateName) {
const fileEntity = {
fileName: templateName,
filePath: "D:\\prism\\svn\\drug-question\\drugques-pc\\src\\template\\"+templateName,
downloadChannel: 'DIR'
}
medicineListApi.ptsFileDownload(fileEntity).then(response => {
fileDownload(response.data, templateName)
}).catch(error => {
console.log(error)
})
}

在package.json中添加依赖版本

"dependencies": {
"@aximario/json-tree": "^2.1.0",
"axios": "^0.19.0",
"core-js": "^2.6.5",
"echarts": "^4.2.1",
"element-ui": "^2.13.2",
"js-file-download": "^0.4.4",
},

如果是下载本地的文件,则应写详细的路径:D:\prism\svn\drug-question\drugques-pc\src\template

在medicineList.js中

const baseUrl = "/medicineList"
ptsFileDownload(query) {
return request({
url: baseUrl +'/fileDownload',
method: 'post',
data: query,
responseType: 'arraybuffer'
})
},

后台代码:

controller:

@RequestMapping(value = "/fileDownload", method = { RequestMethod.POST, RequestMethod.GET })
public String fileDownload(@RequestBody(required=true) PtsFileEntity fileEntity, HttpServletResponse response) throws Exception {
medicineListService.fileDownload(fileEntity, response);
return null;
}

service接口

public interface MedicineListService extends IService<DrugData> {
  void fileDownload(PtsFileEntity fileEntity, HttpServletResponse response) throws Exception;
}

service实现类


@Override
public void fileDownload(PtsFileEntity fileEntity, HttpServletResponse response) throws Exception {
String fileName = fileEntity.getFileName();
if (null == fileName || ("").equals(fileName.trim())) {
logger.error("No FileName Found.");
throw new Exception("No FileName Found.");
}
String downloadChannel = fileEntity.getDownloadChannel();
if (null == downloadChannel || ("").equals(downloadChannel.trim())) {
logger.error("Need to identity download channel.");
throw new Exception("Need to identity download channel.");
}
if (CHANNEL_DIR.equalsIgnoreCase(downloadChannel)) {
this.downloadFromDir(fileEntity, response);
} else if (CHANNEL_URL.equalsIgnoreCase(downloadChannel)) {
this.downloadFromUrl(fileEntity, response);
}
}
/**
* 从URL地址下载
*
* @param fileEntity
* @param response
* @throws Exception
*/
private void downloadFromUrl(PtsFileEntity fileEntity, HttpServletResponse response) throws Exception {
String filePath = fileEntity.getFilePath();
String serverFilePath = fileEntity.getServerFilePath();
if ((null == filePath || ("").equals(filePath.trim())) && (null == serverFilePath || ("").equals(serverFilePath.trim()))) {
logger.error("No FilePath Found.");
throw new Exception("No FilePath Found.");
}
String realFilePath = (null == filePath || ("").equals(filePath.trim())) ? serverFilePath : filePath;
logger.info("Begin download file from Url: " + realFilePath);

try {
URL url = new URL(realFilePath);
HttpURLConnection conn = (HttpURLConnection) url.openConnection();
//设置超时间为3秒
conn.setConnectTimeout(3 * 1000);
//防止屏蔽程序抓取而返回403错误
conn.setRequestProperty("User-Agent", "Mozilla/4.0 (compatible; MSIE 5.0; Windows NT; DigExt)");

//得到输入流
InputStream inputStream = conn.getInputStream();
//获取自己数组
byte[] srcBytes = readInputStream(inputStream);
this.download(fileEntity, response);
} catch (IOException e) {
e.printStackTrace();
throw new Exception(e);
}
}
/**
* 从输入流中获取字节数组
*
* @param inputStream
* @return
* @throws IOException
*/
public static byte[] readInputStream(InputStream inputStream) throws IOException {
byte[] buffer = new byte[1024];
int len = 0;
ByteArrayOutputStream bos = new ByteArrayOutputStream();
while ((len = inputStream.read(buffer)) != -1) {
bos.write(buffer, 0, len);
}
bos.close();
return bos.toByteArray();
}

/**
* 创建临时文件
*
* @param fileEntity
* @param srcBytes
*/
public void downloadFromDir(PtsFileEntity fileEntity, HttpServletResponse response) throws Exception {
String filePath = fileEntity.getFilePath();
String serverFilePath = fileEntity.getServerFilePath();
if ((null == filePath || ("").equals(filePath.trim())) && (null == serverFilePath || ("").equals(serverFilePath.trim()))) {
logger.error("No FilePath Found.");
throw new Exception("No FilePath Found.");
}
String realFilePath = (null == filePath || ("").equals(filePath.trim())) ? serverFilePath : filePath;
logger.info("Begin download file from Directory: " + realFilePath);
fileEntity.setRealFilePath(realFilePath);
try {
// 以流的形式下载文件。
InputStream fis;
fis = new BufferedInputStream(new FileInputStream(realFilePath));
byte[] srcBytes = new byte[fis.available()];
fis.read(srcBytes);
fis.close();
this.download(fileEntity, response);
} catch (IOException ex) {
ex.printStackTrace();
throw new Exception(ex);
}
}

/**
* 拼接response header 并已流的形式下载文件
*
* @param fileEntity
* @param response
* @throws Exception
*/
public void download(PtsFileEntity fileEntity, HttpServletResponse response) throws Exception {
String fileName = fileEntity.getFileName();
String realFilePath = fileEntity.getRealFilePath();
File file = new File(realFilePath);

try {
// 以流的形式下载文件。
InputStream fis;
fis = new BufferedInputStream(new FileInputStream(realFilePath));
byte[] srcBytes = new byte[fis.available()];
fis.read(srcBytes);
fis.close();

// 清空response
response.reset();
// 设置response的Header
response.setHeader("Content-type", "text/html;charset=UTF-8");
response.setCharacterEncoding("utf-8");//设置编码集,文件名不会发生中文乱码

response.setContentType("application/force-download");//
response.setHeader("content-type", "application/octet-stream");
response.addHeader("Content-Disposition", "attachment;fileName=" + new String(fileName.getBytes(), "utf-8"));// 设置文件名
response.addHeader("Content-Length", "" + file.length());
response.setHeader("Access-Control-Allow-Origin", "*");
OutputStream toClient = new BufferedOutputStream(response.getOutputStream());
toClient.write(srcBytes);
toClient.flush();
toClient.close();
} catch (IOException ex) {
throw new Exception(ex);
}
}

如果报错:The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'

解决:将request.js中的withCredentials由true改为false

const service = axios.create({
baseURL: "http://localhost:8080/drugques",
withCredentials: false,
timeout: 150000
});

文件下载:报错The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'的更多相关文章

  1. 微信小程序WebSocket报错:Error during WebSocket handshake: Sent non-empty 'Sec-WebSocket-Protocol' header but no response was received

    Error during WebSocket handshake: Sent non-empty 'Sec-WebSocket-Protocol' header but no response was ...

  2. python webdriver 报错WebDriverException: Message: can't access dead object的原因(pycharm中)

    PyCharm中运行firefox webdriver访问邮箱添加通讯录的时候报错-WebDriverException: Message: can't access dead object 调了半天 ...

  3. 【Mac 10.13.0】安装 libimobiledevice,提示报错:warning: unable to access '/Users/lucky/.config/git/attributes': Permission denied解决方案

    打开终端,执行命令: 1.sudo chown -R XXX /usr/local  (XXX表示当前用户名) 2.ruby -e "$(curl -fsSL https://raw.git ...

  4. mysql忘记root密码或报错:ERROR 1044 (42000): Access denied for user ”@’localhost’ to database ‘xx‘

    有的时候忘记了root密码或其他用户的密码,登录的时候报错:ERROR 1044 (42000): Access denied for user ”@’localhost’ to database ' ...

  5. Access control allow origin 简单请求和复杂请求

    原文地址:http://blog.csdn.net/wangjun5159/article/details/49096445 错误信息: XMLHttpRequest cannot load http ...

  6. Ubuntu下MySQL报错:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)

    在Ubuntu下 想要登录mysql数据库 root@JD:~# mysql -uroot -p 报错 ERROR 1045 (28000): Access denied for user 'root ...

  7. 【问题与解决】Mac OS通过 npm 安装 React Native 报错(checkPermissions Missing write access to /usr/local/lib/node_modules)

    报错情况: 当Mac OS通过 npm 安装 React Native 报错,警告文字为:checkPermissions Missing write access to /usr/local/lib ...

  8. 报错:PermissionError: [WinError 5] Access is denied: 'C:\\Program Files\\Anaconda3\\Lib\\site-packages\\pywebhdfs'

    Outline 在本(Windows系统)地往 “PAI”(hdfs)上上传数据时,需要安装pywebhdfs包,然后就报错了: 报错信息: PermissionError: [WinError 5] ...

  9. CM使用MySQL数据库预处理scm_prepare_database.sh执行报错:java.sql.SQLException: Access denied for user 'scm'@'hadoop101.com' (using password: YES)

    1.报错提示: [root@hadoop101 ~]# /opt/module/cm/cm-/share/cmf/schema/scm_prepare_database.sh mysql cm -hh ...

随机推荐

  1. (22)zip命令:压缩文件或目录&&unzip命令:解压zip文件

    1.zip 命令基本格式如下: [root@localhost ~]#zip [选项] 压缩包名 源文件或源目录列表 注意,zip 压缩命令需要手工指定压缩之后的压缩包名,注意写清楚扩展名,以便解压缩 ...

  2. Python开发桌面微型计算器

    开发Windows窗口需要用到tkinter库 所以上来的第一件事就是: import tkinter as t window = t.Tk()#创建了一个窗口 window.title('微型计算器 ...

  3. acid解释

    原子性A:一个事务内部的所有操作都是不可分割的,这叫原子性.一致性C:事务内部的所有操作要么都成功,要么都失败.隔离性I:事务与事务之间永远不相见.持久性D:就是说数据最终是落到磁盘永久保存的.

  4. SpringMVC数据校验并通过国际化显示错误信息

    目录 SpringMVC数据校验并通过国际化显示错误信息 SpringMVC数据校验 在页面中显示错误信息 通过国际化显示错误信息 SpringMVC数据校验并通过国际化显示错误信息 SpringMV ...

  5. hdu3565 Bi-peak Number (有上界和下界的数位dp)

    Problem Description A peak number is defined as continuous digits {D0, D1 - Dn-1} (D0 > 0 and n & ...

  6. 【noi 2.6_7113】Charm Bracelet(DP)

    题意:N个饰物,有重量和渴望程度.问在M的重量限制内能达到的最大的渴望度. 解法:经典的01问题,但有一个小技巧值得记住:用if比较大小比调用max函数快了不少,这题有100ms左右. 1 #incl ...

  7. Codeforces Round #575 (Div. 3) B. Odd Sum Segments 、C Robot Breakout

    传送门 B题题意: 给你n个数,让你把这n个数分成k个段(不能随意调动元素位置).你需要保证这k个段里面所有元素加起来的和是一个奇数.问可不可以这样划分成功.如果可以打印YES,之后打印出来是从哪里开 ...

  8. Codeforces Round #582 (Div. 3) A. Chips Moving

    传送门 题解: 给你n个数的坐标,你需要把他们移动到一个位置,有两种移动方式 1.向左或者右移动2 2.向左或者右移动1,但是耗费1 求最小耗费 题解: 很简单就可以想到,看一下偶数坐标多还是奇数坐标 ...

  9. C#中word导出功能骚操作

    马上过牛年了,先祝大家新年好,身体好,心情好!!! 年前最后写一篇之前项目开发的一个功能,自己根据系统业务,想到的一个解决办法,效率还是不错的,废话不多说,开整!!! 需求:企业填报自己的企业信息到系 ...

  10. [Golang]-2 Map关联数组与下划线(_)的意义

    目录 map 下划线(underscore) 用在import 用在返回值 用在变量 map map 是 Go 内置关联数据类型(在一些其他的语言中称为哈希 或者字典 ). func main() { ...