快捷導(dǎo)航

JS實(shí)現(xiàn)html頁(yè)面點(diǎn)擊下載文件的兩種方式

更新時(shí)間：2023年07月07日 14:50:17 作者：古柏樹(shù)下

這篇文章主要介紹了JS實(shí)現(xiàn)html頁(yè)面點(diǎn)擊下載文件的兩種方式,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

JS實(shí)現(xiàn)html頁(yè)面點(diǎn)擊下載文件

1.使用<a>標(biāo)簽來(lái)完成

<a href="/user/test/xxxx.txt" rel="external nofollow"  download="文件名.txt">點(diǎn)擊下載</a>

這樣當(dāng)用戶打開(kāi)瀏覽器點(diǎn)擊鏈接的時(shí)候就會(huì)直接下載文件。

但是有個(gè)情況，比如txt,png,jpg等這些瀏覽器支持直接打開(kāi)的文件是不會(huì)執(zhí)行下載任務(wù)的，而是會(huì)直接打開(kāi)文件，這個(gè)時(shí)候就需要給a標(biāo)簽添加一個(gè)屬性“download”;

以下為例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		 <a href="http://171.**.96.**:****/d/c833945c11/files/?p=/plugins.maintain.CheckLinePartTask/cebab687-6dc5-4128-b7d9-8bc2fe369598.png&raw=1" rel="external nofollow"  
		 		download="test.png">點(diǎn)擊下載</a>
	</body>
</html>

其中download后面的屬性是下載后文件的文件名字

如果url指向同源資源，是正常的。

如果url指向第三方資源，download會(huì)失效，表現(xiàn)和不使用download時(shí)一致——瀏覽器能打開(kāi)的文件，瀏覽器會(huì)直接打開(kāi)，不能打開(kāi)的文件，會(huì)直接下載。瀏覽器打開(kāi)的文件，可以手動(dòng)下載。

解決方案一：將文件打包為.zip/.rar等瀏覽器不能打開(kāi)的文件下載。

解決方案二：通過(guò)后端轉(zhuǎn)發(fā)，后端請(qǐng)求第三方資源，返回給前端，前端使用file-saver等工具保存文件。

2.使用按鈕進(jìn)行監(jiān)聽(tīng)

按鈕監(jiān)聽(tīng)又可以分為兩種方法，

一是window.open()

var $eleBtn1 = $("#btn1");
var $eleBtn2 = $("#btn2");
//已知一個(gè)下載文件的后端接口：https://codeload.github.com/douban/douban-client/legacy.zip/master
//方法一：window.open()
$eleBtn1.click(function(){
    window.open("https://codeload.github.com/douban/douban-client/legacy.zip/master");
});

二是表單提交

//方法二：通過(guò)form
$eleBtn2.click(function(){
    var $eleForm = $("<form method='get'></form>");
    $eleForm.attr("action","https://codeload.github.com/douban/douban-client/legacy.zip/master");
    $(document.body).append($eleForm);
    //提交表單，實(shí)現(xiàn)下載
    $eleForm.submit();
});

使用JS把文本內(nèi)容作為html文件下載

一個(gè)簡(jiǎn)單的下載Html頁(yè)面，我找了很多方法，但都不盡人意（有的需要后端協(xié)助，有的需要跨域）。

實(shí)現(xiàn)方法：

var eleTextarea = document.querySelector('textarea');
var eleButton = document.querySelector('input[type="button"]');
// 下載文件方法
var funDownload = function (content, filename) {
  //content是要下載頁(yè)面的html代碼，filename是下載后的文件名稱
    var eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';
    // 字符內(nèi)容轉(zhuǎn)變成blob地址
    var blob = new Blob([content]);
    eleLink.href = URL.createObjectURL(blob);
    // 觸發(fā)點(diǎn)擊
    document.body.appendChild(eleLink);
    eleLink.click();
    // 然后移除
    document.body.removeChild(eleLink);
};
//判斷瀏覽器是否支持a標(biāo)簽的download屬性
if ('download' in document.createElement('a')) {
    // 作為test.html文件下載
    eleButton.addEventListener('click', function () {
        funDownload(eleTextarea.value, 'test.html');    
    });
} else {
    eleButton.onclick = function () {
        alert('瀏覽器不支持');    
    };
}

到此這篇關(guān)于JS實(shí)現(xiàn)html頁(yè)面點(diǎn)擊下載文件（共兩種實(shí)現(xiàn)方法）的文章就介紹到這了,更多相關(guān)js點(diǎn)擊下載文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: