JS實現(xiàn)html頁面點擊下載文件的兩種方式

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

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

JS實現(xiàn)html頁面點擊下載文件

1.使用<a>標簽來完成

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

這樣當用戶打開瀏覽器點擊鏈接的時候就會直接下載文件。

但是有個情況，比如txt,png,jpg等這些瀏覽器支持直接打開的文件是不會執(zhí)行下載任務的，而是會直接打開文件，這個時候就需要給a標簽添加一個屬性“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">點擊下載</a>
	</body>
</html>

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

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

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

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

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

2.使用按鈕進行監(jiān)聽

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

一是window.open()

var $eleBtn1 = $("#btn1");
var $eleBtn2 = $("#btn2");
//已知一個下載文件的后端接口：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");
});

二是表單提交

//方法二：通過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);
    //提交表單，實現(xiàn)下載
    $eleForm.submit();
});

使用JS把文本內容作為html文件下載

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

實現(xiàn)方法：

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

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

您可能感興趣的文章: