텍스트
사용자가 클릭하여 페이지의 정보를 다운로드할 수 있도록 웹페이지에 다운로드 버튼을 추가해야 하는 경우가 있습니다. 그렇다면 이 기능을 어떻게 구현할 수 있을까요? 여기에는 두 가지 방법이 있습니다.
이제 페이지에 다운로드 버튼을 추가해야 합니다. 버튼을 클릭하여 파일을 다운로드하세요.
주제에서 벗어나, 이 다운로드 아이콘은 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('file/user.xlsx')"></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();//表单提交 });
완료 후 페이지의 다운로드 아이콘을 클릭하면 파일이 자동으로 다운로드됩니다.