> 웹 프론트엔드 > JS 튜토리얼 > 버튼을 클릭하면 JS 코드를 사용하여 파일을 다운로드할 수 있습니다.

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

高洛峰
풀어 주다: 2016-12-07 10:11:09
원래의
2442명이 탐색했습니다.

텍스트

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

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

주제에서 벗어나, 이 다운로드 아이콘은 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) 요청 받기

$(&#39;.download&#39;).click(function () {
var tt = new Date().getTime();
var url = &#39;http://192.168.1.231:8080/91survey/ws/excel/download&#39;;
/**
* 使用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) 게시물 요청

$(&#39;.download&#39;).click(function(){
var tt =newDate().getTime();
var url = restUrl +&#39;/excel/download?userId=&#39;+ 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();//表单提交
});
로그인 후 복사

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


관련 라벨:
js
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿