js下載文件

HTML與文件下載

若是但願在前端直接出發某些資源的下載,最方便快捷的方法就是使用HTML5原生的download屬性, 例如:javascript

<a href="large.jpg" download>下載</a>

但顯然,若是純粹利用HTML屬性來實現文件的下載(而不是瀏覽器打開或瀏覽),對於動態內容,就無能爲力。html

例如,咱們對於頁面進行分享的時候,但願分享圖片是頁面內容的實時截圖,此時,這個圖片就是動態的,純HTML顯然沒法知足咱們的需求,藉助JS和其餘一些HTML5特性,例如,將頁面元素轉換到canvas上,而後在轉成圖片進行下載。前端

單只是完成圖片的下載不能知足平常業務的需求,對於業務需求是遠遠不夠的。html5

藉助HTML5 Blob實現文本信息文件下載

若是對Blob不瞭解,能夠先看看張鑫旭的理解DOMString、Document、FormData、Blob、File、ArrayBuffer數據類型一文。java

原理其實很簡單,咱們能夠將文本或者JS字符串藉助Blob轉換成二進制,而後,做爲a元素的href屬性,配合download屬性,實現下載。git

代碼也比較簡單,以下示例(兼容Chrome和FireFox):github

複製代碼
var funDownload = function(content, filename){
    // 建立隱藏的可下載連接
    var eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';
    // 字符內容轉變成blob地址
    var blob = new Blob([content]);
    eleLink.href = URL.createObjectURL(blob);
    // 觸發點擊
    document.body.appendChild(eleLink);
    eleLink.click();
    // 而後移除
    document.body.removeChild(eleLink);
};
複製代碼

其中,content指須要下載的文本或者字符串內容,filename指下載到系統中的文件名稱。ajax

藉助Base64實現任一文件下載

對於非文本文件,也是能夠直接JS觸發下載的,例如,若是咱們想下載一張圖片,能夠把這張圖片轉換成Base64格式,而後下載。json

代碼示例:canvas

複製代碼
var funDownload = function(domImg, filename){
    // 建立隱藏的可下載連接
    var eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';
    // 圖片base64地址
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    var width = domImg.natureWidth;
    var height = domImg.natureHeight;
    context.drawImage(domImg, 0, 0);
    // 若是是PNG圖片,則context.toDataURL('image/png');
    eleLink.href = context.toDataURL('image/jpeg');
    // 觸發點擊
    document.body.appendChild(eleLink);
    eleLink.click();
    // 移除
    document.body.removeChild(eleLink);
};
複製代碼

不止是.html文件,.txt,.json等只要內容是文本的文件,均可以利用這種小技巧實現下載。

在Chrome瀏覽器下,模擬點擊建立的a元素及時不append到頁面中,也是能夠觸發下載的,可是在FireFox瀏覽器中卻不行,所以,上面的funcDownload()方法有一個appendChild和removeChild的處理,就是爲了兼容FireFox瀏覽器。

繼續說實如今下CSV文件的方法

咱們經過ajax從後端請求到的數據通常都是json格式,也就是說須要把json數據轉成csv格式的數據,通過尋找終於找到了一個比較好用的json轉csv的工具

直接上示例代碼:

複製代碼
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Download</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <div class="demo">
        <p><input type="button" value="做爲test.html文件下載"></p>
    </div>
    <script src="json2csv.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        // 示例數據
        var fields = ['car', 'price', 'color'];
        var myCars = [
          {
            "car": "Audi",
            "price": 40000,
            "color": "blue"
          }, {
            "car": "BMW",
            "price": 35000,
            "color": "black"
          }, {
            "car": "Porsche",
            "price": 60000,
            "color": "green"
          }
        ];
        // json數據轉csv格式
        var csv = json2csv({ data: myCars, fields: fields });

        var eleButton = document.querySelector('input[type="button"]');

        // 下載文件方法
        var funDownload = function (content, filename) {
            var eleLink = document.createElement('a');
            eleLink.download = filename;
            eleLink.style.display = 'none';
            // 字符內容轉變成blob地址
            var blob = new Blob([content]);
            eleLink.href = URL.createObjectURL(blob);
            // 觸發點擊
            document.body.appendChild(eleLink);
            eleLink.click();
            // 而後移除
            document.body.removeChild(eleLink);
        };

        if ('download' in document.createElement('a')) {
            // 做爲test.html文件下載
            eleButton.addEventListener('click', function () {
                funDownload(csv, 'test.csv');    
            });
        } else {
            eleButton.onclick = function () {
                alert('瀏覽器不支持');    
            };
        }
    </script>
</body>
</html>
相關文章
相關標籤/搜索