웹 프론트엔드 JS 튜토리얼 js에서 파일을 다운로드하는 간단한 조작에 대해(코드 첨부, 자세한 답변)

js에서 파일을 다운로드하는 간단한 조작에 대해(코드 첨부, 자세한 답변)

May 18, 2018 am 10:25 AM
javascript 작동하다 단순한

다음은 제가 컴파일한 js 파일을 다운로드하는 간단한 작업입니다.

일반 다운로드
예를 들어, 파일을 다운로드할 주소는 다음과 같습니다: http://127.0.0.1/test.rar

//该方法在火狐上没有效果的,在IE浏览器上是可以的window.open("htpp://127.0.0.1/test.rar");
//该方法火狐有些版本是不支持的window.location.href="htpp://127.0.0.1/test.rar";
//为了解决火狐有些版本不支持,可以改成这种方式window.location="htpp://127.0.0.1/test.rar"; 
//该方法IE和火狐都可以,
//url表示要下载的文件路径,如:
htpp://127.0.0.1/test.rar
function downloadFile(url) {   
   try{ 
        var elemIF = document.createElement("iframe");   
        elemIF.src = url;   
        elemIF.style.display = "none";   
        document.body.appendChild(elemIF);   
    }catch(e){ 
        zzrw.alert("下载异常!");
    }     
}
//表单方式直接下载文件
//url表示要下载的文件路径,如:
htpp://127.0.0.1/test.rar
function downloadFile(url)
{
    var form=$("<form>");//定义form表单,通过表单发送请求
    form.attr("style","display:none");//设置为不显示
    form.attr("target","");
    form.attr("method","get");//设置请求类型  
    form.attr("action",url);//设置请求路径
    $("body").append(form);//添加表单到页面(body)中
    form.submit();//表单提交
}1234567891011121314151617181920212223242526272829303132333435363738394041424344
로그인 후 복사

페이지로 이동하지 않고 백그라운드 다운로드를 요청하면 백그라운드에서 데이터 스트림을 반환합니다.

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

get request download

//url表示请求路径,进入后台处理,后台返回一个文件流//例如:url为htpp://127.0.0.1/test
function downloadFile(url){
    //定义一个form表单,通过form表单来发送请求
    var form=$("<form>");    //设置表单状态为不显示
    form.attr("style","display:none");    //method属性设置请求类型为get
    form.attr("method","get");    //action属性设置请求路径,(如有需要,可直接在路径后面跟参数)
    //例如:htpp://127.0.0.1/test?id=123
    form.attr("action",url);    //将表单放置在页面(body)中
    $("body").append(form);    //表单提交
    form.submit();
}12345678910111213141516171819202122232425262728
로그인 후 복사

post request download

//url表示请求路径,进入后台处理,后台返回一个文件流
//例如:url为htpp://127.0.0.1/test
function downloadFile(url){
//定义一个form表单,通过form表单来发送请求
var form=$("<form>");
//设置表单状态为不显示
form.attr("style","display:none");
//method属性设置请求类型为post
form.attr("method","post");
//action属性设置请求路径,
//请求类型是post时,路径后面跟参数的方式不可用
//可以通过表单中的input来传递参数
form.attr("action",url);
$("body").append(form);//将表单放置在web中
//在表单中添加input标签来传递参数
//如有多个参数可添加多个input标签
var input1=$("<input>");
input1.attr("type","hidden");//设置为隐藏域
input1.attr("name","id");//设置参数名称
input1.attr("value","123");//设置参数值
form.append(input1);//添加到表单中
form.submit();//表单提交
}
로그인 후 복사
위 내용은 제가 여러분을 위해 컴파일한 js 파일을 다운로드하는 간단한 작업입니다. 나중에 도움이 되길 바랍니다.

관련글 :

js에서 함수 앞에 코드가 붙어있는 문제

JS가 앱과 어떻게 상호작용하는지 자세히 설명(코드 첨부)

Js 자세히 설명 적용( ) 사용(코드 포함)

위 내용은 js에서 파일을 다운로드하는 간단한 조작에 대해(코드 첨부, 자세한 답변)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

하드 드라이브 일련 번호를 쿼리하는 가장 쉬운 방법 하드 드라이브 일련 번호를 쿼리하는 가장 쉬운 방법 Feb 26, 2024 pm 02:24 PM

하드디스크 일련번호는 하드디스크의 중요한 식별자로 일반적으로 하드디스크를 고유하게 식별하고 하드웨어를 식별하는 데 사용됩니다. 운영 체제를 설치하거나, ​​올바른 장치 드라이버를 찾거나, 하드 드라이브를 수리할 때와 같이 하드 드라이브 일련 번호를 쿼리해야 하는 경우도 있습니다. 이 문서에서는 하드 드라이브 일련 번호를 확인하는 데 도움이 되는 몇 가지 간단한 방법을 소개합니다. 방법 1: Windows 명령 프롬프트를 사용하여 명령 프롬프트를 엽니다. Windows 시스템에서는 Win+R 키를 누르고 "cmd"를 입력한 후 Enter 키를 눌러 명령을 엽니다.

PyCharm 사용 튜토리얼: 작업 실행에 대해 자세히 안내합니다. PyCharm 사용 튜토리얼: 작업 실행에 대해 자세히 안내합니다. Feb 26, 2024 pm 05:51 PM

PyCharm은 매우 인기 있는 Python 통합 개발 환경(IDE)으로 Python 개발을 더욱 효율적이고 편리하게 만들어주는 다양한 기능과 도구를 제공합니다. 이 기사에서는 PyCharm의 기본 작동 방법을 소개하고 독자가 도구 작동을 빠르게 시작하고 능숙하게 사용할 수 있도록 구체적인 코드 예제를 제공합니다. 1. PyCharm 다운로드 및 설치 먼저 PyCharm 공식 웹사이트(https://www.jetbrains.com/pyc)로 이동해야 합니다.

sudo란 무엇이며 왜 중요한가요? sudo란 무엇이며 왜 중요한가요? Feb 21, 2024 pm 07:01 PM

sudo(수퍼유저 실행)는 일반 사용자가 루트 권한으로 특정 명령을 실행할 수 있도록 하는 Linux 및 Unix 시스템의 핵심 명령입니다. sudo의 기능은 주로 다음 측면에 반영됩니다. 권한 제어 제공: sudo는 사용자에게 일시적으로 수퍼유저 권한을 얻을 수 있는 권한을 부여하여 시스템 리소스와 민감한 작업을 엄격하게 제어합니다. 일반 사용자는 필요할 때만 sudo를 통해 임시 권한을 얻을 수 있으며, 항상 슈퍼유저로 로그인할 필요는 없습니다. 향상된 보안: sudo를 사용하면 일상적인 작업 중에 루트 계정을 사용하지 않아도 됩니다. 모든 작업에 루트 계정을 사용하면 올바르지 않거나 부주의한 작업에는 전체 권한이 부여되므로 예기치 않은 시스템 손상이 발생할 수 있습니다. 그리고

Linux Deploy 작업 단계 및 주의사항 Linux Deploy 작업 단계 및 주의사항 Mar 14, 2024 pm 03:03 PM

LinuxDeploy 작업 단계 및 주의 사항 LinuxDeploy는 사용자가 Android 장치에 다양한 Linux 배포판을 신속하게 배포하여 모바일 장치에서 완전한 Linux 시스템을 경험할 수 있도록 도와주는 강력한 도구입니다. 이 기사에서는 LinuxDeploy의 작동 단계와 주의 사항을 자세히 소개하고 독자가 이 도구를 더 잘 사용할 수 있도록 구체적인 코드 예제를 제공합니다. 작업 단계: Linux 설치배포: 먼저 설치

win10 부팅 암호를 얻기 위해 F2 키를 누르는 것을 잊은 경우 수행할 작업 win10 부팅 암호를 얻기 위해 F2 키를 누르는 것을 잊은 경우 수행할 작업 Feb 28, 2024 am 08:31 AM

아마도 많은 사용자들이 집에 사용하지 않는 컴퓨터가 여러 대 있고, 오랫동안 사용하지 않았기 때문에 시동 암호를 완전히 잊어버렸기 때문에 암호를 잊어버린 경우 어떻게 해야 하는지 알고 싶습니까? 그럼 함께 살펴볼까요? win10 부팅 암호를 입력하는 데 F2 키를 잊어버린 경우 어떻게 해야 합니까? 1. 컴퓨터의 전원 버튼을 누른 다음 컴퓨터를 켤 때 F2 키를 누릅니다(컴퓨터 브랜드마다 BIOS에 들어가는 버튼이 다릅니다). 2. BIOS 인터페이스에서 보안 옵션을 찾으세요(컴퓨터 브랜드에 따라 위치가 다를 수 있음). 일반적으로 상단의 설정 메뉴에 있습니다. 3. 그런 다음 SupervisorPassword 옵션을 찾아 클릭합니다. 4. 이때 사용자는 자신의 비밀번호를 볼 수 있으며 동시에 옆에 있는 활성화를 찾아 Dis로 전환합니다.

Huawei Mate60 Pro 스크린샷 작업 단계 공유 Huawei Mate60 Pro 스크린샷 작업 단계 공유 Mar 23, 2024 am 11:15 AM

스마트폰이 대중화되면서 스크린샷 기능은 일상적인 휴대폰 사용에 필수적인 기술 중 하나로 자리 잡았습니다. Huawei의 주력 휴대폰 중 하나인 Huawei Mate60Pro의 스크린샷 기능은 자연스럽게 사용자로부터 많은 관심을 끌었습니다. 오늘은 모두가 더욱 편리하게 스크린샷을 찍을 수 있도록 Huawei Mate60Pro 휴대폰의 스크린샷 작업 단계를 공유하겠습니다. 우선, Huawei Mate60Pro 휴대폰은 다양한 스크린샷 방법을 제공하며, 개인 습관에 따라 자신에게 맞는 방법을 선택할 수 있습니다. 다음은 일반적으로 사용되는 몇 가지 차단에 대한 자세한 소개입니다.

PHP 문자열 조작: 공백을 효과적으로 제거하는 실용적인 방법 PHP 문자열 조작: 공백을 효과적으로 제거하는 실용적인 방법 Mar 24, 2024 am 11:45 AM

PHP 문자열 작업: 공백을 효과적으로 제거하는 실용적인 방법 PHP 개발 시 문자열에서 공백을 제거해야 하는 상황에 자주 직면하게 됩니다. 공백을 제거하면 문자열이 더 깔끔해지고 후속 데이터 처리 및 표시가 쉬워집니다. 이 기사에서는 공백을 제거하는 몇 가지 효과적이고 실용적인 방법을 소개하고 구체적인 코드 예제를 첨부합니다. 방법 1: PHP 내장 함수인 Trim()을 사용합니다. PHP 내장 함수인 Trim()을 사용하면 문자열 양쪽 끝의 공백(공백, 탭, 개행 등 포함)을 제거할 수 있어 매우 편리하고 쉽습니다. 사용.

Ele.me에서 WeChat을 연결하는 방법 Ele.me에서 WeChat을 연결하는 방법 Apr 01, 2024 pm 03:46 PM

Ele.me는 다양한 종류의 음식을 온라인으로 선택하고 주문할 수 있는 소프트웨어입니다. 판매자는 주문을 받은 후 즉시 주문을 처리합니다. 사용자는 소프트웨어를 통해 WeChat을 연결할 수 있습니다. 작동 방법을 알아보려면 PHP 중국어 웹사이트를 확인하세요. Ele.me를 WeChat에 바인딩하는 방법: 1. 먼저 Ele.me 소프트웨어를 열고 홈페이지에 들어간 후 오른쪽 하단에 있는 [내]를 클릭합니다. 2. 그런 다음 내 페이지에서 [계정]을 클릭합니다. ] 왼쪽 상단에 있는 3. 그런 다음 휴대폰, WeChat, Alipay 및 Taobao를 연결할 수 있는 개인 정보 페이지로 이동합니다. 4. 마지막 클릭 후 필요한 WeChat 계정을 선택합니다. WeChat 인증 페이지에 접속하고 [허용]을 클릭하세요.

See all articles