버튼을 클릭하면 JS 코드를 사용하여 파일을 다운로드할 수 있습니다.

텍스트

사용자가 클릭하여 페이지의 정보를 다운로드할 수 있도록 웹페이지에 다운로드 버튼을 추가해야 하는 경우가 있습니다. 그렇다면 이 기능을 어떻게 구현할 수 있을까요? 여기에는 두 가지 방법이 있습니다.

이제 페이지에 다운로드 버튼을 추가해야 합니다. 버튼을 클릭하여 파일을 다운로드하세요.

주제에서 벗어나, 이 다운로드 아이콘은 Font-Awesome에서 참조되었습니다. 사용 시 먼저 전체 Font-Awesome 폴더를 다운로드하거나 Bower를 사용하거나 공식 웹사이트에서 직접 다운로드하세요.

폴더 전체를 프로젝트 파일에 넣은 후 해당 페이지에 CSS 파일을 소개합니다

<link href="libs/font-awesome-4.7.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">

필요한 아이콘을 사용하여 시작할 수 있습니다

<i class="fa fa-download" aria-hidden="true" title="下载"></i>

1. 프로젝트에 있는 파일을 다운로드합니다

. 다운로드 Excel 파일 템플릿의 경우 먼저 프로젝트 폴더 아래에 파일을 배치한 다음 페이지 다운로드 버튼에 onclick 이벤트를 추가할 수 있습니다.

<i class="fa fa-download" aria-hidden="true" title="下载" onclick="window.open(&#39;file/user.xlsx&#39;)"></i>

이렇게 하면 아이콘을 클릭하면 파일이 자동으로 다운로드됩니다.

2. 파일을 다운로드할 요청 주소를 보낸다

JQuery의 ajax 함수의 반환 유형은 xml, text, json, html 및 기타 유형뿐이며 "stream" 유형은 없습니다. , 그래서 ajax 다운로드를 구현해야 합니다. 해당 ajax 기능은 파일 다운로드에 사용할 수 없습니다. 하지만 js를 사용하여 양식을 생성하고, 이 양식을 사용하여 매개변수를 제출하고, "스트림" 유형 데이터를 반환할 수 있습니다. 구현 프로세스 중에 페이지가 새로 고쳐지지 않았습니다.

1) 요청 받기

$('.download').click(function () {
var tt = new Date().getTime();
var url = 'http://192.168.1.231:8080/91survey/ws/excel/download';
/**
* 使用form表单来发送请求
* 1.method属性用来设置请求的类型——post还是get
* 2.action属性用来设置请求路径。
*
*/
var form=$("<form>");//定义一个form表单
form.attr("style","display:none");
form.attr("target","");
form.attr("method","get"); //请求类型
form.attr("action",url); //请求地址
$("body").append(form);//将表单放置在web中
　　/**
* input标签主要用来传递请求所需的参数：
*
* 1.name属性是传递请求所需的参数名.
* 2.value属性是传递请求所需的参数值.
*
* 3.当为get类型时，请求所需的参数用input标签来传递，直接写在URL后面是无效的。
* 4.当为post类型时，queryString参数直接写在URL后面，formData参数则用input标签传递
* 有多少数据则使用多少input标签
*
　　　*/
var input1=$("<input>");
input1.attr("type","hidden");
input1.attr("name","tt");
input1.attr("value",tt);
form.append(input1);
var input2=$("<input>");
input2.attr("type","hidden");
input2.attr("name","companyId");
input2.attr("value",companyId);
form.append(input2);
form.submit();//表单提交
})

2) 게시물 요청

$('.download').click(function(){
var tt =newDate().getTime();
var url = restUrl +'/excel/download?userId='+ userId;
var form=$("<form>");//定义一个form表单
form.attr("style","display:none");
form.attr("target","");
form.attr("method","post");//请求类型
form.attr("action",url);//请求地址
$("body").append(form);//将表单放置在web中
var input1=$("<input>");
input1.attr("type","hidden");
input1.attr("name","tt");
input1.attr("value",tt);
form.append(input1);
var input2=$("<input>");
input2.attr("type","hidden");
input2.attr("name","companyId");
input2.attr("value",companyId);
form.append(input2);
form.submit();//表单提交
});

완료 후 페이지의 다운로드 아이콘을 클릭하면 파일이 자동으로 다운로드됩니다.